部署于S3的Next.js静态应用图片404加载失败问题求助

问题根源 #

你使用Next.js Image组件时，默认会触发指向_next/image的动态请求，这个请求依赖Next.js服务器端的图片优化服务，但S3仅能托管静态文件，无法处理这类动态请求，因此返回404错误。

解决方案 #

1. 启用静态无优化图片模式 #

修改next.config.js，让Next.js直接输出静态图片，跳过服务器端优化逻辑：

module.exports = {
  output: 'export', // 明确指定静态导出模式
  images: {
    unoptimized: true, // 禁用图片优化，直接输出静态文件
  },
};

重新执行next build后，构建产物里的图片会直接存放在_next/static/media目录，Image组件会直接请求这些静态文件，不再通过_next/image代理。

2. 确认静态资源完整上传 #

• 检查.next/static/media目录下的目标图片（比如logo.a7ef02f9.png）是否已完整上传到S3对应路径
• 确保S3静态网站托管的索引文档设置为index.html，错误文档设置为404.html

3. 临时方案：改用原生img标签 #

如果不想修改配置，可直接用原生<img>标签引用构建后的静态图片：

<img src="/_next/static/media/logo.a7ef02f9.png" alt="Logo" width={128} />

注意路径要和构建后实际生成的文件路径完全一致。

验证步骤 #

1. 重新执行next build（配置output: 'export'后会自动生成静态导出文件）
2. 确认.next/static/media目录下存在目标图片
3. 将所有构建产物（包括_next目录和根目录的HTML文件）全量上传到S3
4. 访问网站，检查图片请求路径是否直接指向静态文件而非_next/image

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