Next.js 15 Image组件本地无法加载Firebase图片但Vercel正常的原因排查

看起来你碰到了Next.js 15 Image组件本地加载失效，但部署到Vercel就一切正常的头疼问题，结合你的描述和代码，我帮你梳理几个最可能的原因和对应的解决办法：

• 本地开发环境的CORS跨域限制
  浏览器的同源策略在本地开发时会更严格，你的图片如果来自Firebase存储这类远程服务，很可能因为CORS规则没允许http://localhost:3000访问而被拦截，而Vercel部署后的生产环境域名已经被你配置到了Firebase的允许列表里，所以没问题。
  解决办法：给Firebase Storage配置CORS规则，允许本地开发域名访问。

  1. 创建一个cors.json文件，内容如下：

     [
       {
         "origin": ["http://localhost:3000"],
         "method": ["GET"],
         "maxAgeSeconds": 3600
       }
     ]
     

  2. 使用Google Cloud的gsutil工具部署这个规则：

     gsutil cors set cors.json gs://你的Firebase存储桶名称
     

• Next.js开发服务器或浏览器缓存问题
  本地开发时，服务器缓存或者浏览器缓存可能会导致图片加载异常，而Vercel是全新部署，没有历史缓存的干扰。可以试试这些操作：

  • 用Ctrl+Shift+R强制刷新浏览器，清除页面缓存
  • 重启Next.js开发服务器（先停止npm run dev，再重新启动）
  • 删除项目根目录下的.next文件夹，再重新构建启动

• Next.js配置文件的远程图片域名规则错误
  你提到已经做了必要配置，但可能存在细节错误。Next.js 15的Image组件要求在next.config.js中明确声明允许加载的远程图片域名，比如Firebase存储的域名通常是firebasestorage.googleapis.com，检查你的配置是否正确：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'firebasestorage.googleapis.com',
          port: '',
          pathname: '/**',
        },
      ],
    },
  };
  
  module.exports = nextConfig;
  

  注意要替换成你实际使用的图片域名，并且pathname的通配符要覆盖到你的图片路径。

• 本地网络环境的限制
  有时候本地的内网、代理或者防火墙会拦截远程图片请求，而Vercel的服务器网络不受这些限制。可以试试切换到手机热点访问本地项目，或者检查本地代理设置是否影响了图片的加载。

另外看你的代码，Image组件的fill模式和父容器的relative配置是正确的，组件结构本身没有问题，所以重点还是在环境配置和网络相关的问题上。

备注：内容来源于stack exchange，提问作者Nuwan Chamikara