NextJS+React作品集部署Firebase后Logo图标加载失败求助

排查方向及修复步骤 #

1. 静态资源路径检查 #

Next.js 默认将public目录作为静态资源根目录，必须使用根路径开头引入 Logo：

// 正确写法
<img src="/logo.svg" alt="Site Logo" />

// 错误写法（相对路径会在生产环境失效）
<img src="./logo.svg" alt="Site Logo" />

如果 Logo 放在public/assets下，路径应为/assets/logo.svg。

2. 配置 nextConfig.js（针对子路径部署） #

若你的 Firebase 站点部署在子路径（如https://xxx.web.app/portfolio），需在next.config.js中添加basePath配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/portfolio', // 替换为你的实际子路径
}

module.exports = nextConfig

配置后，所有静态资源路径会自动带上该前缀，无需手动修改代码中的路径。

3. 确认 Firebase 部署配置 #

• 若使用静态导出（next export），firebase.json需指向out目录：

  {
    "hosting": {
      "public": "out",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  }
  

• 若使用 SSR/SSG 模式，需确保 Firebase Functions 与 Next.js 的集成配置正确，未遗漏静态资源路由。

4. 文件名大小写校验 #

本地开发环境（如 Windows）不区分文件名大小写，但 Firebase 托管基于 Linux 系统，严格区分大小写。确保代码中引用的文件名与public目录下的实际文件名完全一致（比如Logo.png≠logo.png）。

5. 清理缓存重新部署 #

缓存残留可能导致资源加载异常，执行以下操作：

• 删除本地.next或out目录
• 重新构建：npm run build（静态导出需额外执行next export）
• 重新部署：firebase deploy --only hosting

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