如何从MySQL中显示图片？React接收ArrayBuffer展示头像问题

前端处理步骤 #

把存在state里的ArrayBuffer转换成浏览器可识别的图片URL，核心是借助Blob和URL.createObjectURL实现：

import { useMemo, useState } from 'react';

function UserAvatar() {
  // 假设state中存储的头像是ArrayBuffer格式的avatarBuffer
  const [avatarBuffer, setAvatarBuffer] = useState(null);

  // 转换ArrayBuffer为可展示的URL
  const avatarUrl = useMemo(() => {
    if (!avatarBuffer) return null;
    // type需和后端返回的图片类型匹配，比如image/png、image/jpeg
    const imageBlob = new Blob([avatarBuffer], { type: 'image/jpeg' });
    return URL.createObjectURL(imageBlob);
  }, [avatarBuffer]);

  return (
    <div>
      {avatarUrl && (
        <img
          src={avatarUrl}
          alt="用户头像"
          // 图片加载完成后释放URL，避免内存泄漏
          onLoad={() => URL.revokeObjectURL(avatarUrl)}
        />
      )}
    </div>
  );
}

后端注意事项 #

确保后端返回正确的二进制数据：

• 数据库中头像字段需设为BLOB类型，查询时直接读取二进制内容
• 响应头要设置正确的Content-Type（如image/jpeg），返回时不做字符串转义，直接输出二进制流

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