公共目录中的资产在Next.js应用中给出404个错误
我一直在尝试为我的网站（使用Next.js）出现Favicon。经历了无数的堆栈溢出帖子和教程后，我开始感到沮丧。我的项目的结构，特别是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 教程，我留下的控制台错误，读： 获取http：// localhost：3000/favicon-32x32.png 404（找不到）。我还尝试通过site.webmanifest用＆lt; link rel =“ sustest” href =“/site.webmanifest” crossorigin =“ use-credentialss链接到头部中的文件。 “＆gt;，但此标签还在控制台中留下了404（找不到）错误。
我已经证实了Favicon PNG是正确的尺寸，16x16＆amp; 32x32。看来我试图在＆lt; head＆gt;中链接到的公共目录中的任何资产都找不到。
还有什么我可以尝试让这些粉丝出现的东西吗？
编辑：这是我的next.config.js文件的内容：
module.exports = {
basePath: '/my-path',
webpack: (config) => {
return config
},
env: {
},
publicRuntimeConfig: {
BACKEND_API_URL: ...
CONSENT_COOKIE_NAME: ...
},
}
I have been trying to get the favicon for my site (uses Next.js) to show up. After going through countless Stack Overflow posts and tutorials, I am starting to get frustrated. My project's structure, and specifically the public directory looks like this:
.
├── 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
The beginning of my app.js file looks like this:
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>
After following this tutorial, I am left with console errors that read: GET http://localhost:3000/favicon-32x32.png 404 (Not Found). I also tried to load the favicons through a site.webmanifest file linked in the Head with <link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials"> but this tag also left a 404 (Not Found) error in the console.
I have verified that the favicon png's are the correct size, 16x16 & 32x32. It seems that any assets living in my public directory that I am trying to link to in the <Head> are not being found.
Is there anything else that I can try to get these favicons showing up?
Edit: Here are the contents of my next.config.js file:
module.exports = {
basePath: '/my-path',
webpack: (config) => {
return config
},
env: {
},
publicRuntimeConfig: {
BACKEND_API_URL: ...
CONSENT_COOKIE_NAME: ...
},
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
因为您已经将
basepath设置为/my-path在next.config.js中，您需要将其包括在您的其他路径参考，例如：Because you've set your
basePathto/my-pathin yournext.config.js, you'll need to include that in your other path references as well, e.g.:我认为Favicon应该采用ICO格式。该粉丝应该是16x16、32x32和48x48的一组。如果您使用在线Favicon发电机，它们会自动设置大小
I think favicon should be in ICO format. The favicon is supposed to be a set of 16x16, 32x32 and 48x48. If you use online favicon generator, they set the size automatically