使用next/image加载Firebase Storage图片返回400状态码如何解决？

Next.js 内置图片优化服务默认会对外部源的URL进行编码、参数拼接处理，而Firebase Storage的资源URL本身已经包含编码后的路径符%2F和必填查询参数alt=media，默认优化器的二次处理会破坏原始URL结构，导致Firebase Storage无法识别请求返回400状态码。原生img标签和加unoptimized={true}时不会触发Next.js的图片优化逻辑，所以可以正常加载。

方案1：配置remotePatterns（推荐，无需修改组件代码） #

在项目根目录的next.config.js文件中添加Firebase Storage的域名白名单和路径匹配规则：

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

module.exports = nextConfig

修改配置后重启开发服务，原有组件代码不需要做任何调整，即可正常触发图片优化，不会再出现400错误。

方案2：自定义图片加载器（适合特殊定制场景） #

如果配置remotePatterns后仍存在兼容问题，可以手动定义适配Firebase Storage的加载器，完全控制URL的生成逻辑：

1. 定义加载器函数

const firebaseLoader = ({ src, width, quality }) => {
  // 直接基于原始Firebase URL拼接优化参数，不会破坏原有结构
  return `${src}&w=${width}&q=${quality ?? 75}`
}

2. 在Image组件上指定加载器

import Image from "next/image";

<Image
  loader={firebaseLoader}
  src="https://firebasestorage.googleapis.com/v0/b/dzgamez.appspot.com/o/images%2Fsecondary_1629980734220.png?alt=media"
  alt="Top Banner"
  layout="fill"
  objectFit="cover"
  className="rounded-sm"
/>

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