Next.js+React应用部署AWS Amplify后图片不显示求助

1. 核对本地图片路径配置 #

• 用next/image加载本地图片时，确保src用根路径（比如/logo.png），不要用相对路径（./logo.png），因为Next.js会把public目录作为静态资源根目录。
• 去Amplify构建日志里搜public关键词，确认构建过程中public目录下的资源有没有被正确打包上传。

2. 配置Next.js图片组件的外部域名白名单 #

• 不管是Cloudinary还是其他外部图片源，只要用next/image加载，必须在next.config.js里把对应域名加入白名单：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'res.cloudinary.com', // 替换成你的Cloudinary实际域名
          pathname: '/**',
        },
      ],
      domains: ['firebasestorage.googleapis.com'], // 保留Firebase域名确保正常加载
    },
  };
  
  module.exports = nextConfig;
  

• 修改完配置后一定要提交到代码仓库，Amplify构建时才会读取最新规则。

3. 检查Amplify的重写与CORS设置 #

• 进入Amplify控制台的App Settings > Rewrites and Redirects，确认添加了Next.js必需的重写规则：

  Source: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
  Target: /index.html
  Type: 200 (Rewrite)
  

• 如果是Cloudinary图片加载失败，去Cloudinary控制台的CORS设置里，把你的Amplify应用域名（比如https://xxx.amplifyapp.com）加入允许访问的来源列表，测试阶段可以临时设为*排查问题。

4. 确认构建命令与输出目录 #

• 在Amplify的App Settings > Build Settings里，核对构建配置：
  • 构建命令用npm run build（或yarn build）
  • 输出目录设为.next（Next.js默认构建输出目录）
• 避免自定义构建脚本篡改了静态资源的生成路径。

5. 清除缓存重试 #

• 在Amplify控制台手动触发重新构建，勾选“清除构建缓存”选项，排除旧缓存导致的资源缺失。
• 前端强制刷新浏览器（Ctrl+Shift+R），加载最新的部署资源。

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