公共目录中的资产在 Next.js App 中给出 404 错误

Question

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

.
├── 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>

完成本教程后，控制台错误如下： GET http://localhost:3000/favicon-32x32.png 404 (Not Found) 。 我还尝试通过<link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials">在 Head 中链接的 site.webmanifest 文件加载网站图标，但此标签也留下了404 (Not Found)控制台错误。

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

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

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

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

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

  env: {
  },

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

Answer 1

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

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

Answer 2

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

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

公共目录中的资产在 Next.js App 中给出 404 错误

问题描述

2 个解决方案

解决方案1
1 已采纳 2022-04-22 22:27:45

解决方案2
0 2022-04-22 21:10:48

公共目录中的资产在 Next.js App 中给出 404 错误

问题描述

2 个解决方案

解决方案1 1 已采纳 2022-04-22 22:27:45

解决方案2 0 2022-04-22 21:10:48

解决方案1
1 已采纳 2022-04-22 22:27:45

解决方案2
0 2022-04-22 21:10:48