本地React项目部署到Netlify后Blob URL图片预览失效的解决方法

可能的原因与修复方案 #

1. 规范Blob URL的创建与清理逻辑 #

Netlify生产环境对未释放的Blob资源限制更严格，务必在组件卸载或更换图片时清理旧的Blob URL，避免内存泄漏同时保证资源正常访问：

const [previewUrl, setPreviewUrl] = useState(null);

const handleFileChange = (e) => {
  const file = e.target.files[0];
  if (file) {
    // 先清理旧URL再创建新的
    if (previewUrl) URL.revokeObjectURL(previewUrl);
    const newUrl = URL.createObjectURL(file);
    setPreviewUrl(newUrl);
  }
};

// 组件卸载时自动清理
useEffect(() => {
  return () => {
    if (previewUrl) URL.revokeObjectURL(previewUrl);
  };
}, [previewUrl]);

2. 替换为Data URL实现预览 #

如果Blob URL仍有兼容性问题，直接将文件转为Data URL嵌入img的src，完全避免Blob资源的环境依赖：

const handleFileChange = (e) => {
  const file = e.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (event) => setPreviewUrl(event.target.result);
    reader.readAsDataURL(file);
  }
};

Data URL将图片编码为base64字符串，适合小型图片预览场景，无跨环境访问限制。

3. 调整Netlify的内容安全策略（CSP） #

Netlify默认CSP可能禁止Blob URL加载，可在项目根目录创建netlify.toml文件，添加允许Blob资源的规则：

[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy = "default-src 'self'; img-src 'self' blob: data:;"

该配置允许页面加载自身、Blob和Data URL来源的图片资源，按需调整规则避免过度开放。

4. 确认React生产构建的兼容性 #

如果是Create React App项目，确保使用官方react-scripts build命令构建，避免自定义压缩或构建配置破坏Blob相关API的正常运行。

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