如何获取和显示 blob 图像

Question

我正在尝试将图像保存到 indexeddb，然后在 React 应用程序中获取并显示它们。我的方法是将图像转换为 blob 并将 blob url 保存到 indexeddb，然后在需要显示时获取 blob url 并将图像 url 设置为 .src。

我如何创建 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('"','')

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

然后我删除 blob: 并将此 url 保存在 indexeddb 中，以便在需要时获取 http://localhost:3000/d7a55f39-b496-476b-8c3c-857874bd107c

这是我需要使用 blob 图片的地方

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;

项目包含所有产品数据，包括保存的 blob url。问题是图片没有显示，我不知道为什么。

我哪里做错了，我该如何显示图像

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 代替。

Answer 2

为您的图片尝试此代码。

示例应用程序：

我更新了a React example on StackBlitz

React `<Item />` 有效的组件：


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

祝你好运...

如何获取和显示 blob 图像

How to fetch and display blob images

javascript

blob

reactjs

示例应用程序：

React `<Item />` 有效的组件：

Javascript:

如何获取和显示 blob 图像

How to fetch and display blob images

javascript

blob

reactjs

示例应用程序：

React <Item /> 有效的组件：

Javascript:

React `<Item />` 有效的组件：