Next.js Image组件无法读取S3中本地assets文件夹的图片

以下是排查和解决的具体方向：

1. 确认S3静态网站托管配置 #

• 启用S3静态网站托管，将索引文档设为index.html，错误文档设为404.html（适配Next.js动态路由和ISR的路由逻辑）
• 使用S3提供的静态网站访问域名（格式如bucket-name.s3-website-[region].amazonaws.com），不要用S3 REST API域名（如bucket-name.s3.amazonaws.com），后者会导致路由和资源路径解析异常

2. 验证图片引用路径 #

• Next.js中public目录下的资源必须使用根路径引用，比如<img src="/assets/your-image.jpg" alt="描述" />，禁止使用相对路径（如../assets/xxx.jpg）
• 动态路由页面（如/posts/[id]）中使用相对路径会导致资源请求路径错误，因为页面URL层级不同，根路径能确保请求指向正确的S3对象位置

3. 检查S3对象的路径与权限 #

• 确认构建后的out目录中，图片文件位于out/assets/下，上传到S3后对象路径应为assets/your-image.jpg（不要嵌套在.next或其他子目录）
• 配置Bucket Policy允许公开访问静态资源，示例Policy：

  {
    "Version": "2012-10-17",
    "Statement": [
      {
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::your-bucket-name/*"
      }
    ]
  }
  

• 不要直接将整个Bucket设为公开，通过上述Policy精准控制对象读权限

4. 调整Next.js构建配置 #

• 在next.config.js中设置output: 'export'，确保生成静态可部署的out目录：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    output: 'export',
    // 针对S3托管，禁用Next.js图片自动优化（S3不支持该功能）
    images: {
      unoptimized: true,
    },
  }
  module.exports = nextConfig
  

• 执行npm run build && next export生成完整静态文件，再将out目录下所有内容上传到S3根目录

5. CloudFront适配（若使用CDN） #

• 若搭配CloudFront，原点域名需使用S3静态网站域名，而非S3 REST域名
• 配置缓存行为允许所有HTTP方法，调整缓存策略避免404页面被长期缓存
• 确保CloudFront分发已完成部署，域名解析指向正确的CloudFront地址

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