Next.js中如何重新加载加载失败的IPFS图片？

核心排查步骤 #

首先明确：404错误本质是请求的图片在IPFS节点上不存在，或是网关无法定位到对应文件。先做这两步验证：

• 打开浏览器控制台，复制那些404的图片URL到新标签页直接访问，确认是否真的无法打开。如果手动访问也404，说明上传IPFS时漏传了这些图片，需要重新上传对应文件到指定CID的目录下。
• 如果手动能打开，问题则出在Next.js的配置或加载逻辑上。

针对性解决方法 #

1. 配置Next.js Image组件允许外部域名

Next.js的Image组件默认限制外部图片域名，必须在next.config.js中添加允许的域名，否则可能导致部分图片加载异常：

// next.config.js
module.exports = {
  images: {
    domains: ['ipfs.filebase.io'],
  },
}

配置完成后重启开发服务器，再测试加载情况。

2. 给图片添加失败重试/占位图逻辑

给Next.js Image组件加上onError事件，处理加载失败的场景，支持重试加载或显示默认占位图：
修改代码中的Image渲染部分：

{items.map((item, i) => {
  const [retryCount, setRetryCount] = useState(0);
  
  const handleImageError = () => {
    // 最多重试2次，避免无限循环
    if (retryCount < 2) {
      setRetryCount(prev => prev + 1);
    }
  };

  return (
    <div className={style.nfts} key={i}>
      <Image 
        layout="fill" 
        src={retryCount > 0 ? `${item}?t=${Date.now()}` : item} // 加时间戳跳过缓存
        alt={item} 
        onError={handleImageError}
        unoptimized // 跳过Next.js图片优化，适配IPFS这类外部资源
      />
    </div>
  );
})}

3. 更换IPFS网关测试

filebase网关可能存在节点同步延迟，试试替换为官方IPFS网关：把图片URL中的https://ipfs.filebase.io/ipfs/换成https://ipfs.io/ipfs/，验证失败的图片是否能加载。如果可以，说明原网关存在问题，可考虑切换网关或配置多网关 fallback。

4. 检查IPFS文件上传完整性

确认300张图片确实都在bafybeiczmjtyrtomsynlge2esqmdde2vmhkjc2ydv5kbq2lqwg2oobeqeq这个CID对应的目录下。可通过IPFS桌面客户端或命令行ipfs ls [CID]列出所有文件，核对是否存在缺失的图片。

内容的提问来源于stack exchange，提问作者Emin Çoşkun