Next.js集成Firebase存储图片报错：Invalid src prop问题求助

以下是针对性的排查和解决方向：

1. 重启Next.js开发服务器 #

修改next.config.js后必须重启开发服务器，否则新配置不会生效，这是这类报错最常见的原因。

2. 优化remotePatterns配置精度 #

Firebase Storage的图片URL格式通常为https://firebasestorage.googleapis.com/v0/b/[存储桶名]/o/[图片路径]?alt=media，可以把配置调整为更精准的匹配规则，避免路径匹配异常：

module.exports = {
    images: {
        remotePatterns: [
            {
              protocol: 'https',
              hostname: 'firebasestorage.googleapis.com',
              port: '',
              pathname: '/v0/b/**',
            },
          ],
    },
};

3. 验证marketplaceTile的URL有效性 #

• 确认从Firestore获取的marketplaceTile是完整HTTPS开头的URL，无拼写错误、无相对路径。
• 直接在浏览器打开该URL，检查能否正常显示图片：
  • 若打不开，说明URL本身无效，可能是生成下载链接时遗漏了alt=media参数（Firebase Storage需要此参数返回图片文件而非元数据），或上传流程存在问题。
  • 若能打开，核对URL中的hostname是否为firebasestorage.googleapis.com，避免域名拼写错误。

4. 检查数据字段与组件传参 #

• 查看console.log(docs)的输出，确认每个product对象中marketplaceTile字段存在、名称正确（无拼写错误，比如误写为marketplace_tile）。
• 确认Product组件的props正确接收了marketplaceTile，传参过程无遗漏。

5. 临时排查：跳过图片优化 #

若以上步骤均无问题，可给Image组件添加unoptimized属性，跳过Next.js的图片优化逻辑，直接加载原图，排查是否为优化规则导致的问题：

<Image 
  src={marketplaceTile} 
  height={200} 
  width={200} 
  className="mx-auto object-contain" 
  alt="Product Image"
  unoptimized
/>

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