React.js中如何展示MongoDB存储的二进制格式图片？

要展示MongoDB中存储的二进制图片，你需要将后端返回的二进制数组转换为浏览器可识别的Data URL或Blob URL，以下是两种可行的实现方式：

方法一：使用Blob URL（推荐，内存友好） #

这种方式通过创建Blob对象生成临时URL，适合较大的图片，且能避免base64字符串过长的问题。

修改App.js代码： #

import React, { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [images, setImages] = useState([]);
  const [imageUrls, setImageUrls] = useState([]);

  const fetchImages = async () => {
    let result = await fetch("http://localhost:5000/a");
    result = await result.json();
    setImages(result);
  };

  // 生成Blob URL并在数据更新时清理旧URL
  useEffect(() => {
    // 清理之前的URL
    imageUrls.forEach(url => URL.revokeObjectURL(url));
    
    // 为每个图片生成新的Blob URL
    const urls = images.map(img => {
      // 注意：这里的图片类型要和实际存储的一致，比如png就改成image/png
      const byteArray = new Uint8Array(img.img.data.data);
      const blob = new Blob([byteArray], { type: "image/jpeg" });
      return URL.createObjectURL(blob);
    });
    setImageUrls(urls);
  }, [images]);

  // 组件卸载时清理所有URL
  useEffect(() => {
    return () => {
      imageUrls.forEach(url => URL.revokeObjectURL(url));
    };
  }, [imageUrls]);

  return (
    <div className="App">
      <h1>Image uploading react</h1>
      {images.map((value, index) => (
        <div key={value._id}>
          <h3>ID: {value._id}</h3>
          <h3>Name: {value.name}</h3>
          <img src={imageUrls[index]} alt={value.name} />
        </div>
      ))}
      <button onClick={fetchImages}>Click Here to See the output</button>
    </div>
  );
}

export default App;

方法二：使用Base64 Data URL #

这种方式将二进制数据直接转换为base64字符串，适合较小的图片，无需额外清理资源。

修改App.js中的图片渲染部分： #

在map循环内直接处理二进制数据：

{images.map((value) => {
  // 将二进制数组转换为base64字符串
  const byteArray = new Uint8Array(value.img.data.data);
  const binaryString = byteArray.reduce((acc, byte) => acc + String.fromCharCode(byte), '');
  const base64String = btoa(binaryString);
  // 拼接Data URL，注意图片类型要匹配
  const imageSrc = `data:image/jpeg;base64,${base64String}`;

  return (
    <div key={value._id}>
      <h3>ID: {value._id}</h3>
      <h3>Name: {value.name}</h3>
      <img src={imageSrc} alt={value.name} />
    </div>
  );
})}

关键注意事项 #

• 图片类型匹配：上述代码中假设图片是JPEG格式，如果你的图片是PNG或其他格式，需要将image/jpeg替换为对应的MIME类型（如image/png）。如果后端存储了图片类型，可以从接口返回的字段中获取并使用。
• key属性：在map循环中必须为每个元素添加唯一的key（这里用value._id），符合React的渲染规范。
• 内存泄漏：使用Blob URL时，一定要记得在数据更新或组件卸载时调用URL.revokeObjectURL释放资源，避免内存占用过高。

内容的提问来源于stack exchange，提问作者Minhazul Abedin Munna