React JS中如何在CSS文件内正确引入图片资源配置背景图

现有代码的核心问题 #

• 语法错误：background-image 引入资源必须用 url() 包裹路径，当前代码直接写裸括号，属于无效CSS语法，浏览器会直接跳过该属性不执行。
• 路径逻辑错误：
  • 错误拼接../public/前缀：主流React脚手架（如Create React App）中，public目录下的静态资源会直接映射到网站根路径，不需要额外加源码目录的相对路径前缀
  • 错误使用%PUBLIC_URL%变量：该变量是HTML模板阶段的专属替换变量，仅在public/index.html文件中可以正常解析，CSS编译流程不会对这个变量做替换处理。

分场景的正确引入规范 #

图片存放于public目录（示例：public/img/header-bg.webp） #

直接从网站根路径引用资源即可，修正后的完整样式：

header.masthead {
    padding-top: 10.5rem;
    padding-bottom: 6rem;
    text-align: center;
    color: #fff;
    background-image: url("/img/header-bg.webp");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
}

这种方式引入的资源不会被Webpack做编译打包，适合存放长期不替换的全局静态资源。

图片存放于src源码目录（示例：src/assets/img/header-bg.webp） #

根据CSS文件的存放位置，写指向图片的相对路径即可。比如CSS文件存放在src/styles/header.css，对应的路径写法为：

background-image: url("../assets/img/header-bg.webp");

这种方式引入的资源会被Webpack编译打包，自动生成带内容hash的可缓存资源路径，是业务组件配图的推荐方式。

避坑提示 #

• 不要在CSS里写../public/xxx这类指向源码目录的相对路径，线上编译后浏览器无法访问项目源码的目录结构
• 所有CSS引入的外部资源（背景图、字体、图标）都必须用url()包裹路径，否则会被判定为无效语法
• 业务CSS中不要依赖%PUBLIC_URL%变量做资源路径拼接，该变量仅支持在HTML模板中生效

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