React前端如何将后端数据流生成图片并通过<img>标签展示

先明确图片数据的格式 #

首先得确认接口返回的data属性是什么类型：

• 如果是Base64编码字符串：会是一串带+/=这类特殊符号的长文本，可能自带data:image/xxx;base64,前缀，也可能没有。
• 如果是二进制原始数据：控制台打印出来通常是ArrayBuffer或Uint8Array这类二进制对象。

对应处理方案 #

情况1：数据是Base64字符串 #

直接拼接成标准的Data URL即可：

import { useState, useEffect } from 'react';

function ApiImage() {
  const [imageSrc, setImageSrc] = useState('');

  useEffect(() => {
    // 替换成你的接口请求逻辑
    fetch('/your-image-api')
      .then(res => res.json())
      .then(data => {
        const rawImageData = data.data; // 接口返回的带特殊符号的data字段
        // 自动判断是否需要补全Data URL前缀（这里以png为例，根据实际图片类型调整）
        const finalSrc = rawImageData.startsWith('data:image') 
          ? rawImageData 
          : `data:image/png;base64,${rawImageData}`;
        setImageSrc(finalSrc);
      });
  }, []);

  return <img src={imageSrc} alt="接口返回图片" />;
}

export default ApiImage;

情况2：数据是二进制（ArrayBuffer/Uint8Array） #

需要把二进制数据转成Blob，再生成可直接使用的Object URL：

import { useState, useEffect } from 'react';

function ApiImage() {
  const [imageSrc, setImageSrc] = useState('');

  useEffect(() => {
    // 请求时必须指定responseType为arraybuffer，确保拿到二进制数据
    fetch('/your-image-api', { responseType: 'arraybuffer' })
      .then(res => res.arrayBuffer())
      .then(buffer => {
        // 创建Blob对象，第二个参数是图片的MIME类型，可从接口响应头的Content-Type获取
        const imageBlob = new Blob([buffer], { type: 'image/png' });
        // 生成临时的Object URL
        const objectUrl = URL.createObjectURL(imageBlob);
        setImageSrc(objectUrl);

        // 组件卸载时清理URL，避免内存泄漏
        return () => URL.revokeObjectURL(objectUrl);
      });
  }, []);

  return <img src={imageSrc} alt="接口返回图片" />;
}

export default ApiImage;

注意点 #

• 图片的MIME类型要和实际一致，比如接口返回的是jpg就用image/jpeg，可以直接读取响应头里的Content-Type值，不用硬编码。
• 如果用Axios请求二进制数据，直接设置responseType: 'blob'能直接拿到Blob对象，省去转ArrayBuffer的步骤。
• 使用Object URL时，一定要在组件卸载时调用URL.revokeObjectURL释放资源。

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