部署在Firebase上的Next.js项目图片无法渲染问题求助

云原生阿岚

2026-6-29

解决Next.js部署到Firebase Hosting后图片无法渲染的问题

核心问题分析

你遇到的问题主要源于Firebase对Next.js的webframeworks实验功能在静态资源路径处理上的兼容性问题，同时可能存在Next.js配置、图片引用路径或Firebase部署配置的偏差。

具体解决步骤

1. 确认public目录的正确配置

Next.js默认读取项目根目录下的public文件夹作为静态资源目录。如果你的public目录不在根目录（比如在project文件夹内），需要在next.config.js中明确指定：

const nextConfig = {
  output: "export",
  images: {
    unoptimized: true,
  },
  // 若public目录在project文件夹下，添加此行
  publicDir: "./project/public",
}

module.exports = nextConfig

2. 修正图片引用方式

如果你通过import导入图片，确保使用从public根目录开始的绝对路径：

// 正确写法（假设图片在public/logo.png）
import logo from "/logo.png";
<img src={logo} alt="Logo" />

若直接使用<img>标签，同样使用绝对路径，避免相对路径（比如../public/logo.png）：
```
<img src="/logo.png" alt="Logo" />
```

3. 手动构建Next.js静态产物

放弃Firebase自动构建，手动生成静态文件更可控：

npm run build

执行后会生成out文件夹（Next.js 13+静态导出的默认产物目录）。

4. 调整Firebase部署配置

修改firebase.json，让Hosting指向手动生成的out文件夹，并确保静态资源能被正确路由：

{
  "hosting": {
    "public": "out",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      // 优先处理图片等静态资源请求，避免被重定向到index.html
      {
        "source": "**/*.{png,jpg,jpeg,gif,webp,svg}",
        "destination": "/$0"
      },
      // 其余请求重定向到index.html（适配Next.js单页应用路由）
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}