如何将 blob 转换为图像并在 React 上显示？

Posted 2023-03-22

【中文标题】如何将 blob 转换为图像并在 React 上显示？

【英文标题】：How to convert blob to image and display it on React?

【发布时间】：2021-12-06 07:06:18

【问题描述】：

我有一些 png 图像作为 blob 存储在数据库中，我正在尝试获取这些 blob 数据并将它们转换为 url。

<Popup trigger=openPopup setTrigger=setPopup>
    <img src=setBlobImages(photoBlob) />
</Popup>

function setBlobImages(photo)
    if(photo === undefined)
        console.log("undefined");
        return undefined
    
    else
        console.log("value")
        var binaryData = [];
        binaryData.push(photo);
        return URL.createObjectURL(new Blob(binaryData))
    

结果：

我怎样才能做到这一点？谢谢你的回答。

【问题讨论】：

<img src=photoBlob />?

不起作用：/

你能粘贴你的 blob 吗？

【参考方案1】：

我想通了。添加“data:image/png;base64”解决了这个问题。

例子：

<img className="blob-to-image" src="data:image/png;base64," + photoBlob></img>