Firebase Storage图片在Next.js应用中无法显示，配置域名后仍加载失败

1. 检查Image组件属性配置 #

• Next.js 12及更早版本的next/image组件必须显式传入width、height属性，或者设置layout="fill"同时给父容器添加position: relative样式，缺少对应配置会导致图片渲染失败。
• Next.js 13+ App Router版本的next/image组件如果使用fill属性，同样需要父容器设置相对定位，否则也会出现占位符问题。
• 可尝试给Image组件添加unoptimized={true}属性，跳过Next.js的图片优化逻辑直接加载原始资源，验证是否为优化逻辑导致的问题。

2. 更新next.config.js配置 #

Next.js 13+官方更推荐使用remotePatterns代替旧版domains配置，适配性更强，可替换为如下配置：

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

module.exports = nextConfig

3. 清除缓存重启服务 #

修改配置后删除项目根目录下的.next缓存文件夹，再重新启动开发服务器，避免旧缓存导致配置不生效。

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