Next.js项目public文件夹图片无法使用，出现404错误求助

问题原因 #

Next.js的public文件夹是静态资源的根访问目录，代码引用静态资源时不需要包含/public前缀——Next.js会自动把public下的文件映射到网站根路径。你之前写的url(/public/frame.png)会让浏览器去根目录下找public文件夹里的图片，但部署后这个public目录是不存在的，所以返回404。

另外你提到图片实际路径是/public/images/frame.png，原CSS路径不仅多了public前缀，还缺失了images层级，这也是导致错误的原因。

解决方法 #

修改CSS中的背景图片路径，去掉/public前缀并补上images层级：

body {
  background-image: url(/images/frame.png);
}

补充验证 #

启动项目后，直接在浏览器地址栏输入http://localhost:3000/images/frame.png，如果能正常显示图片，说明路径配置正确，CSS中使用该路径即可加载背景图。

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