React中为何JSX的img标签可访问public文件夹但CSS背景图不行

本质是两类文件的路径解析规则、构建工具处理逻辑存在差异：

• JSX 中 <img> 标签的路径解析规则
  如果你写的是 /images/xxx.jpg 这类以 / 开头的站点根路径，构建工具不会对路径做转换处理，会直接保留到最终运行代码中。浏览器运行时会从站点根目录（对应项目的public目录）下查找资源，只要public下有对应路径的图片就能正常加载。
• CSS 文件中 url() 的路径解析规则
  CSS 里的相对路径默认相对于 CSS 文件自身的存放位置解析，且这类路径会被构建工具的 css 处理器捕获，只会到 src 目录下查找对应资源，不会主动扫描 public 目录。假设你的 App.css 存放在 src/App.css，写 ./images/img-1.jpg 时，构建工具会尝试查找 src/images/img-1.jpg，你的图片实际存放在 public 目录下，自然无法匹配到资源。

如果需要在CSS中使用public目录下的图片，可选择任意一种方案：

• 改用站点根路径写法：background-image: url("/images/img-1.jpg");，构建工具不会处理这类根路径，会直接从public目录下读取资源
• 把图片资源迁移到src目录下（比如新建src/assets/images/存放），再用相对路径引用：background-image: url("./assets/images/img-1.jpg");，构建工具会正常打包处理这类资源

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