首先,我检查了这个问题,它不是一个重复的如何在React中显示保存为Blob的图像。
我不确定他们在做什么,但我们的代码完全不同。
我一直在按照Azure的文档使用React从Blob存储下载文件:https://learn.microsoft.com/en-us/javascript/api/overview/azure/storage-blob-readme?view=azure-node-latest#download-a-blob-and-convert-it-to-a-string-browsers 这是我的componentDidMount,在这里我正在从我的Blob存储容器下载图像。
当我使用
您有什么想法可以从Azure生成的这个混乱的字符串创建有效的图像源吗?
编辑: 不幸的是,无论这个 blob 是什么,它仍然没有被注册为一个有效的图像来源。我的代码有点不同,因为我遇到了这个错误(Failed to execute 'createObjectURL' on 'URL':),所以我按照那里的说明进行了操作。
这也不起作用:
我不确定他们在做什么,但我们的代码完全不同。
我一直在按照Azure的文档使用React从Blob存储下载文件:https://learn.microsoft.com/en-us/javascript/api/overview/azure/storage-blob-readme?view=azure-node-latest#download-a-blob-and-convert-it-to-a-string-browsers 这是我的componentDidMount,在这里我正在从我的Blob存储容器下载图像。
async function blobToString(blob) { // this is copy-pasted from Azure who provided this as a helper function
const fileReader = new FileReader();
return new Promise((resolve, reject) => {
fileReader.onloadend = (ev) => {
resolve(ev.target.result);
};
fileReader.onerror = reject;
fileReader.readAsText(blob);
});
}
useEffect(() => {
async function fetchData() {
if (!mounted) {
console.log(images)
setImages(images.map(async (image) => {
// console.log(image)
const blobClient = containerClient.getBlobClient(image.src);
let downloadBlockBlobResponse = await blobClient.download()
let downloaded = await blobToString(await downloadBlockBlobResponse.blobBody)
// console.log(downloaded)
image.src = URL.createObjectURL(downloadBlockBlobResponse);
return image;
}));
console.log(images)
setMounted(true);
}
}
fetchData();
}, []);
return (
<>
{mounted ? <>
<img src={images[0].src} />
</> : null}
</>
)
当我使用
console.log
输出downloaded
,也就是图像的字符串版本时,我看到了以下内容:
Chrome浏览器显示这是一个1.1 MB的字符串,所以我确定这就是整个图片。
我知道这不是一个有效的图像src
,因为屏幕完全是空白的,从blob存储中拉出的图片也不是白色的。(毫无疑问,mounted
已经被正确设置,我实际上正在通过自定义组件运行此图像,该组件还注册了图像源无效,您只需相信我正确地传递了源代码给此组件)
您好,这是一段英语文本的中译结果:您有什么想法可以从Azure生成的这个混乱的字符串创建有效的图像源吗?
编辑: 不幸的是,无论这个 blob 是什么,它仍然没有被注册为一个有效的图像来源。我的代码有点不同,因为我遇到了这个错误(Failed to execute 'createObjectURL' on 'URL':),所以我按照那里的说明进行了操作。
这也不起作用:
![enter image description here](https://istack.dev59.com/Pv5GZ.webp)