部署在Firebase Hosting的NuxtImage（IPX Provider）图片404问题求助

1. 修正Firebase Hosting重写规则 #

Firebase Hosting默认会把/_ipx/*这类请求当作静态资源查找，导致404。需要在firebase.json中添加规则，将这类请求优先转发到SSR Cloud Function：

{
  "hosting": {
    "rewrites": [
      {
        "source": "/_ipx/**",
        "function": "ssr" // 此处函数名需与你部署的SSR函数名一致
      },
      {
        "source": "**",
        "function": "ssr"
      }
    ]
  }
}

2. 确保Cloud Function处理所有请求 #

检查SSR函数的入口代码，确认所有请求（包括/_ipx路径）都交给Nuxt处理，避免手动过滤导致IPX请求被丢弃：

import { handleRequest } from './.output/server/index.mjs'

export const ssr = functions.https.onRequest(async (req, res) => {
  await handleRequest(req, res)
})

3. 验证Nuxt Image生产环境配置 #

在nuxt.config.ts中确认IPX配置适配生产环境，避免错误的路径设置：

export default defineNuxtConfig({
  image: {
    provider: 'ipx',
    ipx: {
      // 保持默认/_ipx路径即可，无需额外修改，确保与重写规则匹配
    }
  }
})

4. 调整Cloud Function资源配置 #

IPX处理图片需要足够资源，过小的内存或过短的超时可能导致请求失败。在firebase.json中调整：

{
  "functions": {
    "runtime": "nodejs18", // 使用Nuxt3支持的Node版本
    "memory": "512MB", // 建议提升至512MB或1GB
    "timeoutSeconds": 30
  }
}

5. 确认原始图片路径与IPX配置 #

确保/images/hero.png这类原始图片存放在Nuxt的public目录下，部署时被正确上传。如果图片在自定义目录，需在配置中指定：

export default defineNuxtConfig({
  image: {
    ipx: {
      dirs: ['public/images']
    }
  }
})

6. 查看Firebase函数日志定位问题 #

通过Firebase控制台查看Cloud Function的日志，搜索/_ipx相关请求，排查是否有文件不存在、权限错误或中间件异常等具体报错信息，精准定位问题原因。

内容的提问来源于stack exchange，提问作者Kris D. J.