如何获取和显示 blob 图像

Question

我正在尝试将图像保存到 indexeddb，然后在反应应用程序中获取并显示它们。 我的方法是将图像转换为 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;

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

我可能做错了什么以及如何显示图像

Answer 1

为您的图片尝试此代码。

示例应用：

我已经更新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" />

祝你好运……

Answer 2

The URL lifetime is tied to the document in the window on which it was created.。 ObjectURL 并不意味着要保存在某个地方。您可以将图片转换为 base64 and store as data-uri。