ReactJS中Blob转图片问题：控制台URL显示空白图片

问题根源 #

你后端返回的不是二进制图片流，而是把Node.js的Buffer对象序列化成了JSON（就是Postman里看到的{"type":"Buffer","data":[...]}）。前端拿到这个JSON后直接转Blob，自然是无效的图片数据，所以显示空白。

两种解决办法 #

方法一：修正后端代码（推荐） #

后端应该直接返回二进制图片数据，同时设置正确的Content-Type响应头。比如Node.js/Express环境下可以这么写：

// 假设从数据库取出的是buffer类型的imageData
app.get('/getImage', (req, res) => {
  // 从数据库获取图片二进制数据和对应的内容类型
  const imageData = ...; // 你的Blob格式数据库数据
  const contentType = ...; // 比如'image/png'或'image/jpeg'
  res.set('Content-Type', contentType);
  res.send(imageData); // 直接发送二进制数据，不要转JSON
});

这样前端原代码就能正常工作，axios会收到真正的二进制buffer，转Blob后生成的URL就能正确渲染图片。

方法二：前端适配（后端暂时无法修改时用） #

如果后端没法调整，前端需要把返回的JSON里的data数组转成Uint8Array，再生成Blob：

axios.get("http://localhost:3030/getImage", {
  headers: { authorization: `${authHeader()}` },
  // GET请求参数要放在params里，不是单独的body参数
  params: { key: "value" }
})
.then((response) => {
  // 取出JSON里的data数组
  const bufferArray = response.data.data;
  const contentType = response.headers["content-type"];
  // 把数组转成Uint8Array格式
  const uint8Array = new Uint8Array(bufferArray);
  const blob = new Blob([uint8Array], { type: contentType });
  const url = URL.createObjectURL(blob);
  setImageSrc(url);
});

内容的提问来源于stack exchange，提问作者Yahia