如何获取和显示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团:http://localhost: 3000/d7a55f39 b496 - 476 b - 8 c3c - 857874 - bd107c

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

这里我需要使用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包含所有productdata，包括保存的blob url。问题是图像不显示，我不知道为什么。

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

Answer 1

请勿修改Blob的URL。

当您从URL字符串中取出blob:部分到Blob时，浏览器不再知道您引用的是Blob。相反，在使用URL.createObjectURL创建URL后，请尝试保留URL。

最重要的是，当组件与外部资源同步时(比如获取数据)，你应该使用React的useEffect钩子。

使用React的例子

你可以在StackBlitz查看这个例子

function Item({ item }) {
const imgURL = item.productimg;
const [blobURL, setBlobURL] = React.useState(null);
React.useEffect(() => {
const controller = new AbortController(); // https://developer.mozilla.org/en-US/docs/Web/API/AbortController
const signal = controller.signal;
fetch(imgURL, { signal })
.then((res) => res.blob()) // Get the response and return it as a blob
.then((blob) => { // Create a URL to the blob and use it without modifying it.
setBlobURL(URL.createObjectURL(blob));
})
.catch((error) => { // Error handling here
console.error(error);
});
// Cancel the fetch request on any dependency change
return () => controller.abort();
}, [imgURL]);
return (
<div className="item" id={item.id}>
<Row>
<Col>
{blobURL ? <Image src={blobURL} id="myImg" width="50" height="58" rounded /> : <p>Loading...</p>}
</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(blob => {
document.getElementById('my-img').src = URL.createObjectURL(blob)
})

<img id="my-img" />

好运……

Answer 2

URL生命周期与创建它的窗口中的文档相关联。ObjectURL不打算保存在某个地方。您可以将图像转换为base64并存储为data-uri。