React.js中图片显示方法及BLOB格式图片无法显示的问题排查

我来帮你排查这个图片无法显示的问题——核心原因是你在浏览器环境下错误使用了stream作为axios的响应类型，再加上响应数据的处理方式不对，导致生成的Blob对象无效，最终图片加载失败。

具体错误点拆解 #

• responseType: 'stream'不适合浏览器环境：这个响应类型是为Node.js设计的，在浏览器中axios并不会把响应转换成可用的数据流，你拿到的res.data其实是一个Node.js风格的流对象，根本没法直接用来生成有效的Blob。
• 手动构建Blob的方式错误：你把这个无效的流对象塞进binaryData数组再创建Blob，得到的Blob内容完全不是图片的二进制数据，所以对应的Blob URL自然加载不出图片。

修正后的代码实现 #

直接把axios的responseType改成浏览器支持的blob，axios会自动帮你把响应转换成Blob对象，不用手动处理：

import "./styles.css";
import { useEffect, useState } from "react";
import axios from "axios";

export default function App() {
  const [imgUrl, setImgUrl] = useState(null);

  useEffect(() => {
    let objectUrl;
    const fetchImage = async () => {
      try {
        const res = await axios({
          method: "get",
          url: "https://www.oracle.com/node/oce/storyhub/dev/api/v1.1/assets/CONT0AE22311201E4708BEC9FBEC9C7096D8/native",
          responseType: "blob", // 这里改成blob
        });

        if (res.data) {
          // 直接用响应返回的Blob创建URL
          objectUrl = window.URL.createObjectURL(res.data);
          setImgUrl(objectUrl);
        }
      } catch (err) {
        console.error("图片获取失败:", err);
      }
    };

    fetchImage();

    // 组件卸载时释放Blob URL，避免内存泄漏
    return () => {
      if (objectUrl) {
        window.URL.revokeObjectURL(objectUrl);
      }
    };
  }, []);

  return (
    <div className="App">
      {imgUrl && <img src={imgUrl} alt="加载的图片" />}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

额外优化建议 #

如果你更倾向于用arraybuffer作为响应类型（兼容性更好一些），可以这样处理：

const res = await axios({
  method: "get",
  url: "你的图片接口",
  responseType: "arraybuffer",
});

// 从响应头获取正确的Content-Type，不用硬写image/png
const contentType = res.headers["content-type"];
const imgBlob = new Blob([res.data], { type: contentType });
const objectUrl = window.URL.createObjectURL(imgBlob);
setImgUrl(objectUrl);

这样做的好处是不用手动指定图片类型，直接用接口返回的类型，避免因类型不匹配导致的图片加载失败。

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