在React项目中使用::before伪元素加载本地图片不显示问题求助

在CodeSandbox的React项目里，使用::before伪元素加载同目录下的本地图片时无法显示，但网络图片可以正常加载，以下是具体解决方向：

解决方向 #

• 处理本地图片的webpack解析问题
  React项目依赖webpack处理资源，CSS中直接写相对路径的本地图片可能无法被正确解析。可以先在JS文件中导入图片资源，再通过CSS变量传递给伪元素：

  import "./styles.css";
  import img from "./image.jpeg";
  
  export default function App() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <div className="qrt" style={{ "--img-url": `url(${img})` }}></div>
      </div>
    );
  }
  

  对应的CSS修改为：

  .qrt::before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background-image: var(--img-url);
    background-size: cover;
  }
  

• 修正伪元素的显示类型
  ::before伪元素默认是inline元素，设置宽高不会生效，需要添加display: block或display: inline-block，确保容器能承载图片。

• 校验图片文件与路径
  确认图片文件名、扩展名完全匹配（比如区分.jpeg和.jpg，大小写一致），且图片确实存在于项目根目录，没有被误删或路径错误。

• 适配CodeSandbox的资源处理逻辑
  CodeSandbox的资源加载规则和本地环境有差异，确保图片已正确添加到项目文件列表中，必要时刷新页面或重新导入资源。

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