带有 IPX 提供商的 NuxtImage 对于 Firebase 托管上的图像返回 404

Question

我利用 Firebase 托管和云功能在 Firebase 上部署了具有服务器端渲染 (SSR) 的 Nuxt 3 应用程序。我的应用程序使用 Nuxt Image 模块和默认 IPX 提供程序来进行图像优化。虽然一切都在本地开发环境中按预期运行，但我在生产中遇到了一个持续存在的问题：所有优化的图像都会返回 404 Not Found 错误。

问题示例：

在生产中，尝试通过 /_ipx/f_webp&s_1460x722/images/hero.png 结构的 URL 访问优化图像会导致 404 错误。这些 URL 由 Nuxt Image 模块生成，在本地工作不会出现问题。

使用示例（默认配置）：

<NuxtPicture src="/hero.png" preload sizes="sm:100vw lg:1460px" height="722" width="1460" alt="Hero billede" :img-attrs="{ class: 'w-full' }" />

有人知道如何解决这个问题吗？

Answer 1

你有：

Client Browser
       │
       ├─ Request /_ipx/.../hero.png
       │
Firebase Hosting
       │
       ├─ 404 Not Found (/_ipx/.../hero.png not directly available as a static asset)
       │
Nuxt Server (Cloud Functions)
       └─ IPX Provider (Image optimization not reached)

这意味着您需要确保 Nuxt 服务器（在您的情况下是云功能，而不是 Nitro）正确处理优化图像的请求，其中 IPX 提供程序（Nuxt 的内置自托管图像优化器）图片）可以处理它们。

您需要调整您的 Firebase 托管配置 (

firebase.json

) 以重写对服务 Nuxt 应用程序的 Cloud Function 的图像请求：为您的图像优化 URL 添加

rewrite

规则。这应该将请求重定向到以

/_ipx

开头的路径到您的云功能，而不是在 Firebase 托管中查找静态文件。

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "/_ipx/**",
        "function": "nuxtServer"
      },
      {
        "source": "**",
        "function": "nuxtServer"
      }
    ]
  }
}

将

"nuxtServer"

替换为为 Nuxt 应用程序提供服务的云函数的名称（如果不同）。
如果您的函数有 Id、区域和 pinTag，请参阅“直接请求函数”。

编辑

firebase.json

后，将更改部署到 Firebase 托管和您的云功能 (

firebase deploy

)。