如何在React中渲染Java后端返回的非Base64编码byte[]格式图片

问题根源 #

你当前的问题出在axios默认会将响应数据按UTF-8格式解析为字符串，你拿到的response.data不是原始二进制字节数据，所以后续所有转换操作都会失效。

修复步骤 #

1. 修改axios请求配置，指定响应类型为二进制

给你的axios请求添加responseType: 'blob'配置，让axios直接返回原始二进制Blob对象：

await axios.get('localhost:8080/image', {
  headers: { "Authorization": "Bearer " + token },
  // 新增配置，指定响应为二进制blob
  responseType: 'blob'
})

2. 转换Blob为可渲染的图片地址

这里有两种常用方案，推荐使用第一种性能更高：

方案一：使用URL.createObjectURL直接生成临时地址（推荐）

// 请求成功后处理响应
const imageUrl = URL.createObjectURL(response.data);
this.setState({ image: imageUrl });

// 注意：组件卸载时要释放临时地址，避免内存泄漏
componentWillUnmount() {
  if (this.state.image) {
    URL.revokeObjectURL(this.state.image);
  }
}

之后直接把this.state.image传给img标签的src属性即可。

方案二：将Blob转为Base64格式

如果你需要Base64格式的地址，可以用FileReader转换：

const reader = new FileReader();
reader.readAsDataURL(response.data);
reader.onload = () => {
  this.setState({ image: reader.result as string });
};

可选后端优化（非必须） #

你可以把后端接口的produces属性修改为对应图片类型，比如MediaType.IMAGE_PNG_VALUE，和实际返回的图片格式对应即可，不修改也不影响前端使用。

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