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

【问题标题】：How to convert a buffer array into an image如何将缓冲区数组转换为图像
【发布时间】：2021-08-19 11:35:53
【问题描述】：

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

后端用node.js sequelize MYSQL制作。

和 react.js 中的前端

it is response date from server. Image its an object of image 在服务器上获取请求

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>
     )
   })}

and in this way the image is stored

【问题讨论】：

标签： mysql node.js reactjs buffer

【解决方案1】：

你应该试试 URL.createObjectURL(blob)

testImage.src = URL.createObjectURL(blob);

另外，如果使用 axios，则向responseType: "blob" 发送请求

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

【讨论】：