React Js调用API获取的图片资源作为img标签src使用时无法加载显示求助

• 校验接口字段是否正确读取
  先打印接口解析后的完整返回值，确认imgSrc字段没有取值错误，比如接口返回嵌套结构时取错层级就会拿到undefined，参考调试代码：

  const fetchData = async () => {
    const response = await fetch('你的请求接口地址')
    const result = await response.json()
    // 控制台打印确认取值是否正确
    console.log('完整返回结果', result)
    console.log('取到的imgSrc值', result.imgSrc)
  }
  

• 校验图片路径拼接规则
  你拿到的imgSrc是相对路径，默认会拼接当前前端服务的域名，比如你的前端跑在http://localhost:3000，最终请求的图片地址就是http://localhost:3000/rimg/source/cars/v/1.jpg?crop=false&width=55&height=92&fallback=default3.png&_v=45788f99e6dcc。如果你的图片资源存放在后端服务，需要手动拼接后端域名：

  // 生产环境建议用环境变量配置域名
  const BACKEND_DOMAIN = 'http://你的后端服务实际域名'
  <img src={`${BACKEND_DOMAIN}${imgSrc}`} alt="展示图片" />
  

• 检查资源请求状态
  打开浏览器开发者工具的「网络」面板，过滤「Img」类型的请求，查看该图片请求的状态码做对应处理：
  • 状态码404：确认拼接后的路径和后端静态资源的配置路径是否一致，有没有多斜杠、缺前缀的问题
  • 状态码401/403：说明图片资源需要鉴权，不能直接用src属性加载，需要先请求blob资源转成临时url使用：

    import { useState, useEffect } from 'react'
    
    const Demo = () => {
      const [imgUrl, setImgUrl] = useState('')
      const fetchAuthImg = async () => {
        const res = await fetch(`拼接后的完整图片地址`, {
          headers: {
            'Authorization': `Bearer ${你的登录token}`
          }
        })
        const blob = await res.blob()
        const tempUrl = URL.createObjectURL(blob)
        setImgUrl(tempUrl)
      }
      // 组件卸载时释放临时地址避免内存泄漏
      useEffect(() => {
        return () => {
          if (imgUrl) URL.revokeObjectURL(imgUrl)
        }
      }, [imgUrl])
      return <img src={imgUrl} alt="展示图片" />
    }
    

• 检查渲染时机问题
  避免imgSrc还没拿到就渲染img标签，可以加条件渲染判断：

  {imgSrc && <img src={imgSrc} alt="展示图片" />}
  

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