React.js 中如何为::before伪元素的content属性正确引入图片URL

报错核心原因 #

原生HTML开发场景下，CSS中的url()路径是相对于CSS文件的物理存储位置做解析；但React项目经webpack/Vite等构建工具处理时，css-loader、postcss-loader会把CSS内的url()语句识别为ES模块依赖执行路径匹配。

你当前代码中写的content:url("ascending-sort.png")没有携带相对路径前缀，会被loader判定为npm包依赖，直接去node_modules目录下查找对应资源，自然无法匹配到项目src目录下的本地图片，触发模块解析失败。
伪元素和普通DOM元素的样式解析逻辑完全一致，不存在React场景下的特殊适配规则，问题根源是路径写法不符合构建工具的模块解析逻辑，而非伪元素本身的兼容性问题。

具体修正方法 #

• 常规资源目录适配流程：
  1. 将ascending-sort.png移入项目静态资源目录，比如src/assets/images/
  2. 修改CSS中伪元素的路径配置，补充相对路径前缀，完整样式参考：

     /* 给父元素设置相对定位，作为绝对定位伪元素的参考上下文 */
     .navbar__header {
       position: relative;
     }
     .navbar__header::before {
       /* 按照CSS文件和图片的实际相对层级书写路径 */
       content: url("./assets/images/ascending-sort.png");
       position: absolute;
       left: -40px;
       top: -5px;
     }
     

  注意：路径开头的./是必填项，没有这个前缀的纯文件名会被css-loader识别为npm包依赖名称，直接去node_modules目录查找资源，必然触发解析失败。
• 不同场景的路径兼容技巧：
  • 如果项目配置了@别名指向src目录（CRA/Vite默认支持），可以直接用别名简写路径，比如content: url("@/assets/images/ascending-sort.png")，减少层级书写错误
  • 如果选择将图片放在项目public静态目录下，该目录资源不经过loader处理，此时路径要写为根路径形式：content: url("/ascending-sort.png")，这种写法不会触发css-loader的模块解析逻辑，不会出现编译报错
  • 若使用CSS Modules管理样式，仅需要按照模块规则调整类名绑定方式，url()的路径写法和普通全局CSS完全一致，无额外适配要求

高频踩坑提示 #

• 不要写无相对路径前缀的纯文件名作为url参数，否则必然被loader识别为npm包依赖触发解析失败
• 放在public目录下的资源不要写带../的相对路径，否则同样会被loader拦截做模块解析
• 不需要因为使用了伪元素就在JSX侧额外引入图片资源，只要路径被loader正确解析，伪元素就会正常渲染图片

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