Next.js 13+部署后动态路由页面图片不显示求助

核心原因分析 #

部署后静态页面图片正常、动态页面失效，通常是路径引用规则错误或Next.js构建/导出配置不匹配导致的，结合你的场景，重点排查以下几点：

具体解决步骤 #

1. 修正图片引用路径 #

• JSX 中引用：必须使用根相对路径（以/开头），直接指向public文件夹下的资源，示例：

  // 正确写法
  <img src="/images/credit-card-bg.png" alt="Credit Card" />
  // 错误写法（相对路径会导致动态渲染时路径解析错误）
  <img src="../images/credit-card-bg.png" alt="Credit Card" />
  

• CSS 背景图引用：同样使用根相对路径，避免相对路径，示例：

  .credit-card {
    /* 正确写法 */
    background-image: url('/images/credit-card-bg.png');
    /* 错误写法 */
    background-image: url('../public/images/credit-card-bg.png');
  }
  

2. 检查并修正 next.config.js 配置 #

根据你的配置情况，重点确认：

• 若使用静态导出（output: 'export'），必须添加图片不优化配置，避免Next.js篡改图片路径：

  module.exports = {
    output: 'export',
    images: {
      unoptimized: true, // 静态导出时必须开启，否则图片路径会异常
    },
    // 若部署在子路径下，需设置basePath，比如部署在https://example.com/app/
    // basePath: '/app',
    // 此时图片路径要改为 /app/images/xxx.png
  }
  

• 不要随意设置assetPrefix，除非明确知道部署的资源前缀，否则会导致路径错误。

3. 动态组件/Server Component 特殊处理 #

• 若使用next/image组件，在App Router中：
  • 本地public图片无需配置domains，直接用根路径即可；
  • 静态导出时必须开启images.unoptimized: true，否则图片无法正常加载；
  • Server Component中使用next/image的正确示例：

    import Image from 'next/image';
    
    export default function CreditCard() {
      return (
        <Image
          src="/images/credit-card.png"
          alt="Credit Card"
          width={300}
          height={200}
        />
      );
    }
    

4. 验证部署文件结构 #

构建后检查out文件夹（静态导出的输出目录）：

• 确认out/images文件夹存在，且包含所有public下的图片文件；
• 若图片缺失，检查是否有webpack配置或插件干扰了public资源的复制，恢复默认配置重试。

内容的提问来源于stack exchange，提问作者Ahmet Said Olgun