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

Question

我有一些 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))
    }
}

结果：

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

Answer 1

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

例子：

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