Next.js部署Netlify后背景图片无法显示问题求助

解决方案 #

• 将CSS中的背景图片路径从 url(./../../../public/drImage.jpg) 修改为 url(/drImage.jpg)

原因说明 #

Next.js 里的 public 目录是静态资源的根目录，部署后该目录下的所有文件都可以通过根路径直接访问，不需要用相对路径定位到public目录。你之前的相对路径在本地开发时能正常生效，但打包部署过程中，webpack会错误地把路径解析成内部模块路径（也就是你看到的webpack:///mini-css-extract-plugin/...），导致图片无法加载。改用根路径后，Netlify会正确映射到静态资源的实际位置，图片就能正常显示。

额外检查 #

如果你的项目在next.config.js中配置了assetPrefix，需要把路径调整为 ${assetPrefix}/drImage.jpg，确保和配置的前缀保持一致。

内容的提问来源于stack exchange，提问作者Shiva Gowtham kale