CSS文件从public文件夹引入图片时background-image路径报错如何解决？

第一步：核对文件路径与大小写 #

• 首先确认图片实际存放位置：如果图片存放在public/images/目录下，/images/img-2.jpg为正确路径；如果直接存放在public根目录，才使用/img-2.jpg路径
• 检查文件名大小写是否完全匹配：Linux、类Unix部署环境对路径大小写敏感，若实际文件名为Img-2.jpg，写小写img-2.jpg会直接触发404错误

第二步：核对项目静态资源配置 #

如果使用Vue、React、Vite等框架/打包工具，检查是否修改过静态资源根路径配置：

• Vue项目检查vue.config.js中的publicPath配置项
• React项目检查package.json中的homepage字段
• Vite项目检查vite.config.js中的base配置项
  如果上述配置设置了非/的根路径前缀（比如配置为/my-app/），则需要给图片路径加上对应前缀，修改为/my-app/images/img-2.jpg才可正常访问

第三步：核对部署路径与CSS写法 #

• 若使用打包工具，不要写指向public目录的相对路径（比如../public/images/img-2.jpg），这类路径会被打包工具转译后出现错乱，统一使用指向静态根的绝对路径即可
• 若为纯静态无打包项目，确认部署时的根目录是public文件夹还是项目根目录：如果部署根目录为项目根目录，需要将路径修改为/public/images/img-2.jpg

快速排查方法 #

打开浏览器控制台的「网络」标签，刷新页面后查看图片的实际请求URL，和你预期的路径对比，可快速定位是路径拼接错误、文件不存在还是文件权限问题。

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