Question

171

How to fetch and display blob images

rated 0 times [ 176] [ 5] / answers: 1 / hits: 13357 / 3 Years ago, fri, march 12, 2021, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

katelynn

Add To Favorites

Follow

Total Points: 378

Total Questions: 86

Total Answers: 108

Location: Azerbaijan

Member since Fri, May 12, 2023

1 Year ago

katelynn questions

1 npm update is not updating the version in package.json file

Mon, Apr 4, 22, 00:00, 2 Years ago

1 Svelte store function update

Mon, Nov 16, 20, 00:00, 4 Years ago

1 How can I use swiper on IE? is there any solution?

Thu, Jul 23, 20, 00:00, 4 Years ago

1 Frida - Calling a specific method overload

Wed, Apr 15, 20, 00:00, 4 Years ago

1 How may I upload file with formData to node js with express?

Wed, May 29, 19, 00:00, 5 Years ago

View All

answered 3 Years ago daijab · Accepted Answer

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 />