React前端如何将后端返回的byte[]转换为图片并显示

看起来你已经确认后端返回的字节数组是有效的，但用Blob加载图片时一直报错，我来帮你解决这个问题！

问题根源 #

你当前的代码里直接把后端返回的普通数字数组传给了Blob，但Blob处理普通数字数组时，会把每个数字当成UTF-8字符来解析，而不是二进制字节——这就导致生成的图片URL是无效的，自然加载失败。

而你用Base64转换器能成功显示，是因为转换器正确把数字数组转换成了二进制格式，所以我们要做的就是在前端也完成这个正确的转换。

解决方案步骤 #

1. 把普通数字数组转换成Uint8Array

Uint8Array是专门用来存储8位无符号整数的数组，正好对应二进制字节。修改你处理图片的代码：

// 原来的代码：
// const byteArray = result.data.eventFlyer;
// 改成：
const byteArray = new Uint8Array(result.data.eventFlyer);
const blob = new Blob([byteArray], { type: "image/png" });
const imageUrl = URL.createObjectURL(blob);
setImageUrl(imageUrl); // 别忘了把这个URL存到状态里，用于渲染

2. 调整渲染逻辑

因为这是从后端加载的图片，不需要依赖selectedImage状态，直接用imageUrl判断即可：

{imageUrl && (
  <Box mt={2} textAlign="center">
    <div>Event Flyer Preview:</div>
    <img src={imageUrl} alt="Event Flyer" height="100px" />
  </Box>
)}

3. 可选：添加内存泄漏防护

当组件卸载时，记得释放URL.createObjectURL创建的对象URL，避免内存泄漏：

useEffect(() => {
  return () => {
    if (imageUrl) {
      URL.revokeObjectURL(imageUrl);
    }
  };
}, [imageUrl]);

完整修改后的loadEvent函数示例 #

const loadEvent = async () => {
  try {
    const result = await axios.get(
      `http://localhost:8080/api/event/getEvent/${id}`
    );
    console.log(result.data);
    
    // 设置事件相关状态
    setEvent(result.data);
    setLocation(result.data.location);
    setStartTime(moment(result.data.startTime, "YYYY-MM-DDTHH:mm"));
    setEndTime(moment(result.data.endTime, "YYYY-MM-DDTHH:mm"));
    
    // 处理图片字节数组
    const byteArray = new Uint8Array(result.data.eventFlyer);
    const blob = new Blob([byteArray], { type: "image/png" });
    const imageUrl = URL.createObjectURL(blob);
    setImageUrl(imageUrl);
    
    // 测试图片加载
    const img = new Image();
    img.onload = function () {
      console.log("Image loaded successfully.");
    };
    img.onerror = function (error) {
      console.log("Error loading image.", error);
    };
    img.src = imageUrl;
  } catch (error) {
    console.error("加载事件失败:", error);
  }
};

额外注意点 #

• 如果后端存储的图片不是PNG格式，记得把Blob的type改成对应的类型（比如image/jpeg），或者可以让后端返回图片的MIME类型，前端动态设置。
• 确保后端返回的eventFlyer字段确实是完整的图片字节数组，没有被截断或编码错误。

这样修改后，应该就能正常显示后端返回的图片了！

备注：内容来源于stack exchange，提问作者Vidushika Dasanayka