从服务器获取图片时，如何处理编码后的图像响应？

数据老陈

2026-8-3

解决Axios获取图片返回二进制乱码的问题

你看到的控制台输出是图片原始二进制数据被默认解析为字符串导致的乱码，状态码200说明请求本身成功，只需调整Axios的响应解析配置即可解决：

核心解决方法：指定响应类型

Axios默认将响应解析为json或text，获取二进制文件时需显式设置responseType为blob或arraybuffer：

方式1：使用`blob`类型（推荐用于直接展示图片）

axios.get('/your-image-api-path', {
  responseType: 'blob'
}).then(res => {
  // 将Blob对象转换为浏览器可识别的URL
  const imageUrl = URL.createObjectURL(res.data);
  // 示例：赋值给img标签的src
  document.querySelector('img').src = imageUrl;
  // 不再需要时可释放URL资源（可选）
  // URL.revokeObjectURL(imageUrl);
}).catch(err => {
  console.error('图片获取失败:', err);
});

方式2：使用`arraybuffer`类型（适合需要处理二进制数据的场景）

axios.get('/your-image-api-path', {
  responseType: 'arraybuffer'
}).then(res => {
  // 转换为Blob对象，需指定正确的图片MIME类型（如image/jpeg、image/png）
  const blob = new Blob([res.data], { type: 'image/jpeg' });
  const imageUrl = URL.createObjectURL(blob);
  // 后续展示逻辑同上
});