React页面展示MongoDB存储图片：二进制转Base64渲染问题

问题根源 #

1. Data URI格式错误：你写的data:image/png;${base64String}缺少base64,标识，浏览器无法识别这是base64编码的图片数据。
2. Axios响应类型未配置：默认情况下Axios会把响应解析为JSON，二进制图片数据需要指定responseType才能正确获取。
3. 状态异步更新导致的转换错误：Cimage是异步更新的，直接在组件顶层计算base64字符串可能拿到初始空数组，导致转换出无效的base64值。

修复代码示例 #

1. 修正Axios请求配置

const [Cimage, setCimage] = useState([]);
const [entries, setEntries] = useState([]);

useEffect(() => {
  async function getEntry(){
    try {
      // 指定responseType为arraybuffer，确保获取正确的二进制数据
      const res = await axios.get("http://localhost:4000/api/usernames", {
        responseType: 'arraybuffer'
      });
      setEntries(res.data);
      // 赋值图片二进制数据数组
      setCimage(res.data[0].Coverimg.data);               
    } catch (error) {
      console.log(error);
    }
  }
  getEntry();
}, []);

2. 正确生成Base64字符串（带依赖监听）

import { useMemo } from 'react';

// 仅当Cimage变化时重新计算base64
const base64String = useMemo(() => {
  if (!Cimage.length) return '';
  return btoa(String.fromCharCode(...new Uint8Array(Cimage)));
}, [Cimage]);

3. 修正img标签的Data URI格式

{/* 只有当base64String有效时才渲染图片 */}
{base64String && (
  <img 
    src={`data:image/png;base64,${base64String}`} 
    alt="food" 
    className="middle-img"
  />
)}

替代方案：使用Blob URL（更高效） #

如果图片体积较大，使用Blob URL比base64更节省内存：

const imageUrl = useMemo(() => {
  if (!Cimage.length) return '';
  // 创建Blob对象
  const blob = new Blob([new Uint8Array(Cimage)], { type: 'image/png' });
  // 生成临时URL
  return URL.createObjectURL(blob);
}, [Cimage]);

// 渲染图片
{imageUrl && (
  <img 
    src={imageUrl} 
    alt="food" 
    className="middle-img"
  />
)}

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

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