CodeSandbox中使用CSS background-image:url()无法加载背景图求助

问题根源 #

在CodeSandbox的React项目里，组件内通过import导入图片能正常显示，是因为webpack会自动处理资源路径，把图片打包到正确位置并生成有效引用地址；但CSS里的相对路径是直接对应打包后的CSS文件位置，而非本地编写CSS时的目录结构，导致路径匹配出错。

可行解决办法 #

• 使用项目根目录的绝对路径
  直接写从项目根开始的路径，无需考虑CSS文件所在位置：

  background-image: url('/src/images/hero.svg');
  

• 通过JS导入后传递给CSS（更稳妥）
  先在组件中导入图片，再通过CSS变量或内联样式传递给目标元素：
  组件代码：

  import heroSvg from './images/hero.svg';
  import './Hero.css';
  
  export default function Hero() {
    return <div className="hero-section" style={{ '--hero-bg': `url(${heroSvg})` }}></div>;
  }
  

  CSS代码：

  .hero-section {
    background-image: var(--hero-bg);
  }
  

• 调整相对路径到正确层级
  根据CSS文件与src/images的实际层级关系修改路径，比如CSS在src/styles文件夹时，需要回退一级再指向images：

  background-image: url('../images/hero.svg');
  

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