React项目中如何从指定数据库接口地址显示二进制图片？

我之前也碰到过一模一样的场景，给你两个亲测有效的解决方案，根据你的后端返回情况选就行：

方法一：直接用img标签指向API地址（最简单） #

如果你的后端接口返回二进制数据时，已经设置了正确的Content-Type响应头（比如image/jpeg、image/png这类图片格式），那直接把API地址丢给img的src属性就搞定了：

import React from 'react';

export default function StoredImage() {
  return (
    <div className="image-container">
      <img
        src="http://localhost:8000/pictures/f31289ae-0491/data"
        alt="从数据库获取的图片"
        style={{ maxWidth: '600px', height: 'auto' }}
      />
    </div>
  );
}

要是这个方法没效果，大概率是后端没设置正确的响应头，或者返回的是无类型的二进制流，那就试试下面的方法。

方法二：通过Fetch获取Blob并生成本地URL #

这种方式需要手动请求二进制数据，转成Blob对象后生成临时URL给img用，用完记得清理避免内存泄漏：

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

export default function StoredImage() {
  const [imageSrc, setImageSrc] = useState(null);

  useEffect(() => {
    let tempObjectUrl;

    const loadImage = async () => {
      try {
        // 请求二进制图片数据
        const response = await fetch('http://localhost:8000/pictures/f31289ae-0491/data');
        if (!response.ok) throw new Error('图片加载失败');
        
        // 转成Blob对象
        const imageBlob = await response.blob();
        // 生成临时URL
        tempObjectUrl = URL.createObjectURL(imageBlob);
        setImageSrc(tempObjectUrl);
      } catch (err) {
        console.error('加载图片出错:', err);
      }
    };

    loadImage();

    // 组件卸载时释放临时URL，防止内存泄漏
    return () => {
      if (tempObjectUrl) URL.revokeObjectURL(tempObjectUrl);
    };
  }, []);

  if (!imageSrc) {
    return <div>图片加载中...</div>;
  }

  return (
    <div className="image-container">
      <img
        src={imageSrc}
        alt="从数据库获取的图片"
        style={{ maxWidth: '600px', height: 'auto' }}
      />
    </div>
  );
}

额外注意事项 #

• 要是前端和后端端口不同，得确保后端配置了CORS跨域允许，不然会被浏览器拦截请求
• 可以在浏览器开发者工具的Network面板里查看接口的响应头，确认Content-Type是否正确
• 方法二里的URL.revokeObjectURL一定要加，不然每次组件挂载都会生成新的临时URL，时间长了会占内存

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