React项目中如何展示经Axios鉴权请求获取的图片

你当前代码存在的核心问题 #

• 直接给useEffect传入async回调会触发React运行时警告：effect回调的返回值必须是清理函数或无返回，async函数返回的Promise会被React误识别为清理逻辑，引发异常
• 直接将Axios的完整响应对象存入img状态无法被图片标签识别，浏览器不会解析Axios包装的响应结构（包含请求配置、响应头等冗余字段）
• 你之前找到的转换工具函数中使用的Buffer是Node.js服务端专属全局对象，浏览器环境没有该API，直接运行会抛出ReferenceError

具体实现步骤 #

1. 调整Axios请求配置
   在原有携带鉴权请求头的配置基础上，新增responseType: 'arraybuffer'参数，让Axios直接接收后端返回的图片二进制流，替代默认的JSON解析逻辑
2. 转换二进制流为可被<img>标签解析的资源地址
   拿到arraybuffer格式的响应数据后，通过浏览器原生Blob API构造可用的资源地址，两种常用方式按需选择：
   • Object URL方式（推荐，性能更优）：通过URL.createObjectURL()生成临时内存地址，不会生成超长的base64字符串，减少状态存储体积
   • Base64 DataURL方式：通过FileReader将二进制流转为base64字符串，适合需要把图片地址持久化存储、跨页面传递的场景
3. 渲染图片
   将生成的有效资源地址绑定到<img>标签的src属性上，即可正常加载展示

修正后的完整可运行代码 #

import React, { useEffect, useState } from 'react';
import axios from 'axios'

export default function TesteImagens() {
  const [imgSrc, setImgSrc] = useState('')

  useEffect(() => {
    // 在effect内部定义异步函数，避免直接给effect传async回调
    const fetchAuthenticatedImage = async () => {
      const token = JSON.parse(localStorage.getItem('Token'))
      const config = {
        headers: { Authorization: `Bearer ${token}` },
        responseType: 'arraybuffer' // 必须指定返回类型为二进制数组
      };
      try {
        const response = await axios.get('http://127.0.0.1:3333/imagem/1610978351872-download.jpg-undefined.jpeg', config)
        // 构造Blob对象，根据后端实际返回的图片mime type调整，示例以jpeg格式为例
        const imageBlob = new Blob([response.data], { type: 'image/jpeg' })
        // 生成临时Object URL
        const objectUrl = URL.createObjectURL(imageBlob)
        setImgSrc(objectUrl)

        // 组件卸载时清理临时URL，避免内存泄漏
        return () => URL.revokeObjectURL(objectUrl)
      } catch (err) {
        console.error('带鉴权的图片加载失败', err)
      }
    }

    fetchAuthenticatedImage()
  }, [])    

  return (
    <div>
      {imgSrc && <img src={imgSrc} alt="鉴权加载的图片" />}
    </div>
  );
}

常见注意事项 #

• 如果需要实现Base64格式的转换，可以用浏览器原生FileReader替换工具函数里的Node.js Buffer逻辑，参考片段：

  const reader = new FileReader()
  reader.onloadend = () => setImgSrc(reader.result)
  reader.readAsDataURL(imageBlob)
  

• 接口返回异常时（比如token失效、图片不存在），后端通常会返回JSON格式的错误信息而非图片流，这类情况需要先校验响应头里的content-type是否为图片类型，否则直接转Blob会展示出损坏的图片占位符
• 生成的Object URL属于页面内存中的临时资源，页面关闭后会自动释放，不需要手动持久化存储在数据库或本地缓存中

内容的提问来源于stack exchange，提问作者Pedro Henrique Gomes