ReactJS中通过API获取图片后无法在<img>标签显示的问题

你的代码有几个关键问题导致图片无法显示，逐一修正即可：

1. responseType 配置位置错误 #

responseType 是 Axios 请求配置的顶层属性，不是 headers 的子属性。你把它放在 headers 里，Axios 不会识别这个配置，导致返回的不是正确的 arraybuffer 格式数据，后续转 base64 自然出错。

2. catch 代码语法错误 #

你的 catch 块里写了多余的箭头函数 error => {console.log(error)}，这会导致错误捕获逻辑失效，应该直接处理 error 参数：

catch (error) { console.log(error) }

3. 浏览器环境不支持 Node.js 的 Buffer #

Buffer.from 是 Node.js 专属 API，浏览器里没有这个对象，需要用浏览器原生方式把 arraybuffer 转成 base64：

• 先把 arraybuffer 转成 Uint8Array
• 再转成二进制字符串
• 最后用 btoa() 编码成 base64

4. 图片 MIME 类型不匹配 #

你的 API 返回的是 .png 图片，但你拼接的 data URI 用了 image/jpeg，类型不匹配会导致浏览器无法解析图片，应该改成 image/png。

修正后的完整代码 #

const getPhoto = async ({ jwtToken }) => {
    const apiEndpoint = 'http://localhost:8000/resources/photos/default.png';
    const config = {
        headers: {
            'Authorization': `Bearer ${jwtToken}`
        },
        responseType: 'arraybuffer' // 移到顶层配置
    };
    try {
        const response = await axios.get(apiEndpoint, config);
        
        // 浏览器环境下的 arraybuffer 转 base64 方法
        const uint8Array = new Uint8Array(response.data);
        let binary = '';
        uint8Array.forEach(byte => {
            binary += String.fromCharCode(byte);
        });
        const base64 = btoa(binary);
        
        return `data:image/png;base64,${base64}`; // 匹配图片实际类型
    } catch (error) {
        console.log(error); // 修正 catch 语法
    }
};

调用代码保持不变：

setImage(await getPhoto({ jwtToken }));

然后用 <img src={image} /> 就能正常显示图片了。

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