从图像 blob 设置图像源

Question

我试图从 API 请求图片并将 img 标签的 src 属性设置为该图片的地址。API 返回一个代表 .png 文件的二进制大对象(blob)。目前，我正在使用以下代码来请求该图片：

const fetchResult = await fetch(imageApiUrl);
const resultBlob = await fetchResult.blob();
console.log(resultBlob);

在控制台中，我可以看到：

Blob {size: [some number], type: "image/png" }

我知道我有一个结果。我假设是一个Blob对象。现在我需要将这个Blob对象设置为HTML中标签的源，代码如下：

<img id="profilePicture" alt="Profile Picture" height="250" width="250" />

我有这个：

var profilePicture = document.getElementById('profilePicture');

如何将profilePicture元素的src设置为blob？

- Dev

---

这个回答解决了你的问题吗？使用JavaScript显示Blob - Daniel Beck

Answer 1

您可以使用URL.createObjectURL来创建一个指向内存中图像的临时 URL：

let url = URL.createObjectURL(resultBlob);

const img = document.getElementById('profilePicture');
img.src = url;

- Guerric P