在Firebase Cloud Storage中使用Nuxt Image优化时遇400错误求助

我用Nuxt Image压缩图片尺寸和质量，通过Nuxt服务端路由获取Firebase存储的图片下载链接。按要求在nuxt.config.ts中配置Firebase存储域名：

export default defineNuxtConfig({
  image: {
    domains: ['firebasestorage.googleapis.com']
  }
})

模板里使用NuxtImg组件渲染图片：

<NuxtImg :src="image" />

未添加该域名时，图片能正常加载（实际是直接加载原图，未经过Nuxt Image处理）；但将域名加入列表后，出现无提示的400错误，控制台显示：Failed to load resource: 服务器响应状态为400 ()

可能的原因及解决方法 #

• Firebase存储URL的查询参数被代理丢失
  Firebase存储的图片URL通常包含?alt=media或token这类必填参数，Nuxt Image代理请求时可能未正确传递这些参数，导致Firebase返回400。
  解决：改用更精确的remotePatterns配置，确保代理能匹配完整的Firebase存储路径：

  export default defineNuxtConfig({
    image: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'firebasestorage.googleapis.com',
          pathname: '/v0/b/**'
        }
      ]
    }
  })
  

• Nuxt Image解析Firebase URL格式出错
  Firebase文件路径中可能包含%2F这类编码字符，Nuxt Image的代理逻辑解析时出现异常。
  解决：尝试将provider配置为自定义类型，手动适配Firebase的URL规则；或者直接利用Firebase存储自带的图片处理能力（若支持），在原图URL后追加尺寸、质量参数实现压缩。

• Nuxt Image版本存在兼容性bug
  检查当前Nuxt及Nuxt Image的版本，升级到最新稳定版，部分旧版本存在第三方存储域名代理的问题。

临时替代方案 #

如果以上方法无效，可先移除domains中的Firebase域名，同时给NuxtImg指定width/height和quality属性，让浏览器直接加载并缩放图片（虽不如服务端压缩高效，但能临时解决显示问题）：

<NuxtImg :src="image" width="800" height="600" quality="80" />

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