如何获取和显示 blob 图像

Question

I am trying to save images to indexeddb and then fetch and display them in a react app. My approach is to convert images to a blob and save the blob url to indexeddb and then when it's time to display, fetch the blob url and set the image url as.src.

How I created the blob

 fetch(imgurl, { mode: 'no-cors', method: "get", headers: { "Content-Type": "application/json" } }).then(response => response.blob()).then(async images => { var blob_url = URL.createObjectURL(images) var blobA = blob_url.replace("blob:","") var blobB = blobA.replace('"','')

this is bloburl blob:http://localhost:3000/d7a55f39-b496-476b-8c3c-857874bd107c

I then remove blob: and save this url in indexeddb to be fetched when needed http://localhost:3000/d7a55f39-b496-476b-8c3c-857874bd107c

this is where I need to use the blob image

 import React from "react"; import { Row, Col, Container, Image } from 'react-bootstrap'; function Item({ item }) { const imgurl = item.productimg fetch(imgurl).then(res => res.blob()) // Gets the response and returns it as a blob.then(async blob => { const test = await blobToImage(blob) console.log("image test",test) let objectURL = URL.createObjectURL(blob); let myImage = document.getElementById('myImg') myImage.src = objectURL; }); return ( <div className="item" id={item.id}> <Row> <Col> <Image id="myImg" width="50" height="58" rounded /> </Col> <Col xs={6}> <div className="item-info"> <p>{item.name}</p> </div> </Col> <Col>3 of 3</Col> </Row> <div className="item-actions"> <button className="btn-remove">X</button> </div> </div> ); } export default Item;

Item contains all the productdata including the saved blob url. The problem is the images are not showing and I could not figure out why.

what could i be doing wrong and how can I display the images

Answer 1

The URL lifetime is tied to the document in the window on which it was created. . ObjectURL is not meant to be saved somewhere. You can convert your image to base64 and store as data-uri instead.

Answer 2

Try this code for your image.

Example App:

I've updated a React example on StackBlitz

React <Item /> component that will work:

function Item({ item }) {
  const imgurl = item.productimg;
  const imageRef = React.useRef();
  React.useEffect(() => {
    fetch(imgurl)
      .then(res => res.blob()) // Gets the response and returns it as a blob
      .then(blob => {
        let objectURL = URL.createObjectURL(blob);
        console.log(imageRef.current);
        imageRef.current.src = objectURL;
      });
  }, []);

  return (
    <div className="item" id={item.id}>
      <Row>
        <Col>
          <Image ref={imageRef} id="myImg" width="50" height="58" rounded />
        </Col>
        <Col xs={6}>
          <div className="item-info">
            <p>{item.name}</p>
          </div>
        </Col>
        <Col>3 of 3</Col>
      </Row>

      <div className="item-actions">
        <button className="btn-remove">X</button>
      </div>
    </div>
  );
}

Javascript:

 const imgurl = "https://cdn62.picsart.com/182788826000202.jpg?type=webp&to=crop&r=256" fetch(imgurl).then(response => response.blob()).then(myBlob => { var urlCreator = window.URL || window.webkitURL; var imageUrl = urlCreator.createObjectURL(myBlob); const myImgElem = document.getElementById('my-img'); myImgElem.src = imageUrl })

 <img id="my-img" />

Good Luck...