React+TypeScript中createObjectURL生成图片链接报404错误求助

排查步骤与解决方案 #

1. 确认接口返回的数据类型是否正确 #

getPatientAvatar必须返回原始二进制数据（ArrayBuffer或Blob），如果接口返回JSON、base64字符串或错误文本，Blob创建会直接失效：

• 若用fetch请求接口，需指定正确的响应处理方式：

async function getPatientAvatar(patientId: string) {
  const res = await fetch(`/api/patients/${patientId}/avatar`);
  if (!res.ok) throw new Error('获取头像失败');
  // 直接返回Blob或ArrayBuffer，禁止使用res.json()
  return res.blob();
}

2. 修正Blob创建逻辑 #

• 如果pictureData本身已是Blob类型，无需二次包装，直接生成URL：

const imageUrl = URL.createObjectURL(pictureData);
setPhotoUrl(imageUrl);

• 若接口返回base64字符串，需先转成二进制再创建Blob：

// 假设pictureData为"data:image/jpeg;base64,xxxxxx"格式
const base64Str = pictureData.split(',')[1];
const byteChars = atob(base64Str);
const byteArray = new Uint8Array(byteChars.length);
for (let i = 0; i < byteChars.length; i++) {
  byteArray[i] = byteChars.charCodeAt(i);
}
const blob = new Blob([byteArray], { type: 'image/jpeg' });
const imageUrl = URL.createObjectURL(blob);
setPhotoUrl(imageUrl);

3. 清理Object URL避免内存泄漏与失效 #

Object URL会占用浏览器资源，组件卸载时必须释放，这也能解决部分URL莫名失效的问题：

import { useState, useEffect } from 'react';

// 组件内部逻辑
const [photoURL, setPhotoUrl] = useState<string>('');

useEffect(() => {
  return () => {
    if (photoURL) {
      URL.revokeObjectURL(photoURL);
    }
  };
}, [photoURL]);

4. 检查接口响应的正确性 #

打开浏览器控制台Network标签，查看getPatientAvatar对应的请求：

• 确认响应状态码为200
• 确认响应头Content-Type是image/jpeg（或对应图片格式）
• 预览响应内容，应为乱码的二进制数据，而非JSON错误信息

5. 增加错误调试 #

给img标签添加错误回调，快速定位问题：

<img src={photoURL} alt="患者头像" onError={(e) => console.error('图片加载失败:', e)} />

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