NextJS部署至Firebase Hosting后静态图片无法加载（404）求助

问题根源 #

你遇到的404是因为Firebase Hosting的默认重写规则没适配NextJS Image组件的请求逻辑——Image组件生成的带参数URL（/_next/image?url=...）没有被正确转发到对应的静态资源或NextJS处理逻辑，而直接访问静态路径能正常加载，说明资源本身是存在的。

修复步骤：调整firebase.json重写配置 #

修改项目根目录的firebase.json，添加针对/_next/image请求的重写规则，确保Firebase正确处理这类带查询参数的请求：

{
  "hosting": {
    "public": "out", // 注意：NextJS 13+ App Router静态导出用out；Pages Router静态导出可能用.next/public，根据自身构建方式调整
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      // 优先处理Image组件的参数化请求
      {
        "source": "/_next/image",
        "destination": "/_next/image"
      },
      // 其他请求默认路由到入口文件
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

修改后执行firebase deploy --only hosting重新部署，即可解决Image组件的404问题。

图片是否可以像视频那样用public目录？ #

完全可以，操作逻辑和视频一致：

1. 将图片放到项目根目录的public文件夹下，比如public/assets/images/logo.png
2. 在组件中直接使用相对路径作为Image组件的src，无需导入：

import Image from 'next/image';

export default function Home() {
  return (
    <Image
      src="/assets/images/logo.png"
      alt="站点Logo"
      width={640}
      height={320}
    />
  );
}

这种方式既符合你处理视频的习惯，也能正常触发NextJS Image组件的优化功能，只要Firebase重写规则配置正确，图片就能正常加载。

额外注意事项 #

• 若使用NextJS SSR/SSG模式（非静态导出），可能需要结合Firebase Functions处理NextJS服务器逻辑，静态导出场景用上述配置即可
• 确认构建后的输出目录（out或.next）中存在_next/static/media下的图片资源
• 若仍有问题，可执行firebase hosting:clear-cache清除Firebase缓存后重新部署

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