React中获取二进制图片数据并实现页面显示的问题求助

核心问题在于你没有正确配置axios的响应类型，导致获取到的二进制数据被错误解析，最终转base64后无法被img识别。以下是正确的实现步骤：

1. 修正cloudApi.jsx中的请求配置 #

axios默认会将响应解析为JSON，因此必须显式设置responseType为blob（推荐）或arraybuffer，确保拿到正确的二进制图片数据：

import axios from 'axios';

// 创建fileApi实例
const fileApi = axios.create({
  baseURL: '/your-api-base-url', // 替换为实际的接口基础地址
});

// 封装FileService的getFile方法
export const FileService = {
  getFile: async (filePath) => {
    try {
      const response = await fileApi.get(filePath, {
        responseType: 'blob', // 关键配置：告诉axios返回Blob类型的二进制数据
      });
      return response.data;
    } catch (err) {
      console.error('获取图片失败:', err);
      throw err;
    }
  },
};

2. 在Logo.jsx中正确处理图片数据 #

有两种可靠的方式将二进制数据转为img可识别的src：

方式一：使用URL.createObjectURL（性能更优） #

通过创建临时URL指向Blob对象，无需转base64，更适合大图片：

import { useState, useEffect } from 'react';
import { FileService } from './cloudApi';

const Logo = () => {
  const [imageSrc, setImageSrc] = useState('');

  useEffect(() => {
    const loadImage = async () => {
      try {
        const imageBlob = await FileService.getFile('src/assets/icons/googleIcon.png');
        // 创建临时URL
        const objectUrl = URL.createObjectURL(imageBlob);
        setImageSrc(objectUrl);

        // 组件卸载时释放临时URL，避免内存泄漏
        return () => URL.revokeObjectURL(objectUrl);
      } catch (err) {
        console.error('图片加载失败:', err);
      }
    };

    loadImage();
  }, []);

  return <img src={imageSrc} alt="Google Icon" />;
};

export default Logo;

方式二：转为base64格式 #

如果必须使用base64，可通过FileReader将Blob转为base64字符串：

import { useState, useEffect } from 'react';
import { FileService } from './cloudApi';

const Logo = () => {
  const [imageSrc, setImageSrc] = useState('');

  useEffect(() => {
    const loadImage = async () => {
      try {
        const imageBlob = await FileService.getFile('src/assets/icons/googleIcon.png');
        const reader = new FileReader();
        
        reader.onload = () => {
          // reader.result即为带前缀的base64字符串，可直接作为img的src
          setImageSrc(reader.result);
        };
        
        reader.readAsDataURL(imageBlob);
      } catch (err) {
        console.error('图片加载失败:', err);
      }
    };

    loadImage();
  }, []);

  return <img src={imageSrc} alt="Google Icon" />;
};

export default Logo;

为什么之前的方式无效？ #

你之前没有设置responseType，axios会把二进制PNG数据当成JSON解析，得到的是乱码或损坏的数据，此时再转base64自然无法被img标签识别。只有让axios返回原始的Blob/ArrayBuffer类型数据，才能正确转为可显示的图片资源。

内容的提问来源于stack exchange，提问作者Nihal Selma KESLER