public 目录中的资产在 Next.js 应用程序中出现 404 错误

Question

我一直在尝试让我的站点（使用 next.js）的图标显示出来。在浏览了无数 Stack Overflow 帖子和教程之后，我开始感到沮丧。我的项目结构，特别是 public 目录如下所示：

.
├── Dockerfile
├── README.md
├── components
├── next.config.js
├── package-lock.json
├── package.json
├── pages
├── public
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── css
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── mstile-150x150.png
│   ├── safari-pinned-tab.svg
│   └── site.webmanifest
└── utils

我的 app.js 文件的开头如下所示：

export default function Layout({ children, page }) {
  return (
    <>
      <Head>
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
        .....
      </Head>

完成 this 教程后，我发现控制台错误如下：GET http://localhost:3000/favicon-32x32.png 404 (Not Found)。我还尝试通过 site.webmanifest 文件 link 在头部使用 <link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials"> 加载图标，但此标记还在控制台中留下了 404 (Not Found) 错误。

我已验证图标 png 的大小正确，16x16 和 32x32。似乎没有找到我试图 link 到 <Head> 的 public 目录中的任何资产。

还有什么我可以尝试让这些网站图标显示的吗？

编辑：这是我的 next.config.js 文件的内容：

module.exports = {
  basePath: '/my-path',

  webpack: (config) => {
    return config
  },

  env: {
  },

  publicRuntimeConfig: {
    BACKEND_API_URL: ...
    CONSENT_COOKIE_NAME: ...
  },
}

Answer 1

  <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />

我认为网站图标应该是 ICO 格式。网站图标应该是一组 16x16、32x32 和 48x48。如果您使用在线图标生成器，它们会自动设置大小

Answer 2

因为您在 next.config.js 中将 basePath 设置为 /my-path，您还需要将其包含在其他路径引用中，例如：

<link rel="icon" type="image/png" sizes="32x32" href="/my-path/favicon-32x32.png" />

public 目录中的资产在 Next.js 应用程序中出现 404 错误

Assets within public directory give 404 errors in Next.js App

javascript

favicon

head

reactjs

next.js