Next.js 14.0.2部署至Vercel后图片无法加载问题求助

问题排查与解决步骤 #

• 静态图片路径问题

  • 若图片放在public目录下，直接用根路径引用，比如<Image src="/logo.png" alt="Logo" width={100} height={100} />，不要加public/前缀，Vercel会自动将public目录映射到网站根路径。
  • 组件内导入的图片，确保导入路径准确，比如import avatar from '../assets/avatar.png'，再通过<Image src={avatar} alt="Avatar" width={80} height={80} />使用，这种方式Next.js会自动处理图片优化，部署时不会出错。
  • 注意文件名大小写：本地Windows系统不区分大小写，但Vercel运行在Linux环境下，UserAvatar.png和useravatar.png会被视为不同文件，必须保证代码里的路径和实际文件名完全一致。

• Image组件域名权限配置

  • 如果使用外部域名的图片，默认next.config.js未配置允许的域名，会被Next.js的安全策略拦截。需要修改next.config.js添加远程域名规则：

    /** @type {import('next').NextConfig} */
    const nextConfig = {
      images: {
        remotePatterns: [
          {
            protocol: 'https',
            hostname: '你的图片域名',
            pathname: '/**',
          },
        ],
      },
    };
    
    module.exports = nextConfig;
    

• NextAuth中间件拦截静态资源

  • 检查middleware.ts的匹配规则，如果规则过于宽泛（比如匹配所有路径'/'），会导致图片请求被强制要求认证，从而加载失败。
  • 修改匹配规则，排除静态资源路径：

    export { default } from "next-auth/middleware";
    
    export const config = {
      matcher: [
        // 仅保护需要认证的业务路由
        '/dashboard/:path*',
        '/profile/:path*',
        // 排除静态资源、图片优化路由等
        '/((?!api|_next/static|_next/image|favicon.ico).*)',
      ],
    };
    

  • 务必确保_next/image路径不被中间件拦截，这是Next.js处理图片优化后的请求路径。

• Vercel缓存与构建问题

  • 尝试在Vercel控制台重新部署，勾选「清除缓存重新部署」选项，避免旧配置或资源缓存导致的问题。
  • 本地先执行npm run build和npm run start模拟生产环境，如果本地构建后也出现图片加载问题，说明是代码配置错误，而非Vercel平台问题。

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