React环境下如何从返回content-type:image/jpeg的API中获取图片src

实现方案 #

核心逻辑 #

接口返回的是图片二进制流，你贴出的乱码是错误将二进制流解析为文本导致的，正确做法是直接处理二进制数据，转换为Blob对象后生成临时URL展示即可。

具体操作步骤 #

• 请求阶段明确指定响应类型为blob
  如果你用fetch发起请求：

  fetch('你的API地址', {
    method: 'GET'
    // 其他请求配置按需添加
  })
  .then(res => res.blob())
  .then(blob => {
    const tempImgUrl = URL.createObjectURL(blob)
    // 将临时地址存入state供渲染使用
    setImageUrl(tempImgUrl)
  })
  

  如果你用axios发起请求，需要额外添加responseType配置：

  axios.get('你的API地址', {
    // 必须配置该项，否则axios会默认将返回内容解析为文本，导致二进制数据损坏
    responseType: 'blob'
  })
  .then(res => {
    const tempImgUrl = URL.createObjectURL(res.data)
    setImageUrl(tempImgUrl)
  })
  

• 渲染阶段直接使用生成的临时URL

  {imageUrl && <img src={imageUrl} alt="接口返回图片" />}
  

• 内存泄漏优化
  组件卸载时释放生成的临时URL：

  useEffect(() => {
    return () => {
      if (imageUrl) URL.revokeObjectURL(imageUrl)
    }
  }, [imageUrl])
  

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