React项目本地背景图片设置失败，请求排查问题原因

首先得搞清楚为啥%PUBLIC_URL%在你的CSS里不管用——React的这个占位符只在特定场景下会被解析：比如public/index.html里的<img src="%PUBLIC_URL%/xxx.jpg">，或者JSX组件里的src={process.env.PUBLIC_URL + '/xxx.jpg'}。但独立的CSS文件（哪怕是放在public文件夹里的）并不会被Webpack或者React处理这个占位符，浏览器会直接把%PUBLIC_URL%当成路径的一部分去请求，自然就会出现400错误了。

给你几个可行的解决方案，按最简单的来：

方案1：直接使用相对/根路径访问 #

因为你的styles.css和background.jpg都在public文件夹里，而public是React项目的静态资源根目录，直接写文件名就行：

background-image: url('background.jpg');

或者写相对路径也可以：

background-image: url('./background.jpg');

方案2：如果是src目录下的CSS文件（额外补充） #

要是你的CSS是放在src文件夹里的，还可以通过import图片的方式引入（不过你的情况是public里的CSS，这个方案可忽略）：

// 在组件文件里
import bgImg from './background.jpg';

然后在对应的CSS模块或者内联样式里用url(${bgImg})，不过这更适合src里的资源管理。

验证步骤 #

1. 把styles.css里的背景图代码替换成上面的路径
2. 刷新浏览器（或者重启npm start，不过通常刷新就够了）
3. 检查浏览器控制台，应该不会再出现400错误，背景图就能正常显示了

另外再确认下：background.jpg确实在public文件夹根目录，文件名大小写完全一致（比如别写成Background.jpg，Linux/macOS系统是区分大小写的），文件本身没有损坏哦。

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