如何获取和显示 blob 图像

Posted 2023-03-22

【中文标题】如何获取和显示 blob 图像

【英文标题】：How to fetch and display blob images

【发布时间】：2021-06-10 12:51:02

【问题描述】：

我正在尝试将图像保存到 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"   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。问题是图像没有显示，我不知道为什么。

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

【参考方案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"   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" />

祝你好运……

【讨论】：

我在使用这个时出现这个错误。无法设置未定义的属性'src' ...为什么？

【参考方案2】：

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