How to fetch and display blob images

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 (
        


            
                 
                

                
                
                    
                        {item.name}
                    
                
                3 of 3
            
           

            
                
            
        
    );
}

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

user_4742733 · Answer

Try this code for your image.

Example App:

I've updated a React example on StackBlitz

React 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 (
    
      
        
          
        
        
          
            {item.name}
          
        
        3 of 3
      

      
        
      
    
  );
}

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
})

Good Luck...

user_2318162 · Answer

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.

How to fetch and display blob images

2 Answers

Example App:

React `<Item />` component that will work:

Javascript:

How to fetch and display blob images

2 Answers

Example App:

React <Item /> component that will work:

Javascript:

React `<Item />` component that will work: