React17中App.css引用public文件夹图片作为背景图报错如何解决

问题原因 #

React 项目中src目录下的CSS文件会经过webpack编译处理，你写的绝对路径/images/img-8.jpg会被webpack当做CSS文件所在目录的相对路径来解析，不会自动映射到项目根目录的public文件夹，因此会触发资源找不到的报错。

解决方案 #

• 方案1：使用Create React App 官方提供的%PUBLIC_URL%占位符，修改CSS中的路径写法即可直接匹配public目录资源：

  background-image: url('%PUBLIC_URL%/images/img-8.jpg');
  

  打包时该占位符会被自动替换为public文件夹的实际访问路径。
• 方案2：将静态图片放到src目录下的assets（自行创建）文件夹中，使用相对路径引用：
  假设你的App.css存放在src根目录，图片存放在src/assets/images/img-8.jpg，写法如下：

  background-image: url('./assets/images/img-8.jpg');
  

  这种方式更推荐，webpack会自动对图片进行压缩、哈希重命名等优化，避免缓存问题。
• 方案3：保留public路径的写法，将背景图改为行内样式引入：

  <div className="sign-up" style={{backgroundImage: `url(/images/img-8.jpg)`}}>
    {/* 组件内容 */}
  </div>
  

  行内样式中的路径会直接从站点根目录寻找资源，自动命中public下的对应文件。

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