如何将缓冲数组转换为图像

Question

在数据库中，我有缓冲区类型的图像，我如何将缓冲区数据转换为图像并在前端显示图像

后端是用node.js序列化MYSQL。

和react.js中的前端

是服务器的响应日期。它是图像的对象在服务器上获取请求

router.get("/", validateToken, async(req,res) => {
const UserId = req.user.id;
console.log(UserId)
const listOfCollect = await Collections.findAll({
where: {
UserId: UserId,
}
});
res.json(listOfCollect);
});

前端

useEffect(() => {   
axios.get("http://localhost:3001/collect", {
headers: {
token: localStorage.getItem("token"),
}
}).then((response) => {
console.log(response.data)
setListOfCollect(response.data);
});
}, []);

在页面上显示一个对象

{listOfCollect.map((value,key) => {
return (
<Col key={key} className="collect-block">            
<img src={value.image} alt="collectimage" 
onClick={() => {
history.push(`/post/${value.id}`);
}}>
</img>
<div className="collect-block_title"> {value.name}</div>
<div className="collect-block_description"></div>
<button
onClick={() => {
deletePost(value.id);
}}
>
{" "}
Delete Post
</button>
</Col>
)
})}

，以这种方式存储图像

Answer 1

您应该尝试URL.createObjectURL(blob)

testImage.src = URL.createObjectURL(blob);

同样，如果使用axios

，到responseType: "blob"

到请求参考:https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL