Javascript 如何将ArrayBuffer（PNG图像）直接渲染为React中的图像？

我得到一个ArrayBuffer，表示通过套接字发送的PNG图像文件。有没有一种方法可以直接渲染到图像选项卡，而无需先将其转换为base64？似乎没有必要仅为渲染而添加额外的转换步骤。

您可以将数组缓冲区转换为blob，然后使用

URL.createObjectURL（blob）

为图像创建源

示例

const{useState，useffect}=React；
常量url=”https://cors-anywhere.herokuapp.com/https://www.w3schools.com/howto/img_avatar2.png"
常量应用=（）=>{
常数[{
srcBlob，
srcDataUri
}，setSrc]=useState({
srcBlob:null，
srcDataUri:null
});
useffect（（）=>{
让isUnmounted=false；
获取（url{
})
.then（response=>response.blob（））
.then（blob=>blob.arrayBuffer（））
.然后（arrayBuffer=>{
如果（已卸载）{
回来
}
const blob=新blob（[arrayBuffer]）
const srcBlob=URL.createObjectURL（blob）；
setSrc（状态=>({
状态
srcBlob
}));
})
return（）=>{
isUnmounted=true；
}
}, [])
回来
{srcBlob&&
Blob:{srcBlob}
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);