如何在Create React App(CRA)的CSS中引用public文件夹图片？

嘿，我之前也碰到过一模一样的情况！不用折腾移图片或者eject项目，Create React App本身就支持直接引用public文件夹里的静态资源，只要用对路径就行，具体方法如下：

• 使用根目录绝对路径引用
  因为public文件夹是CRA项目的静态资源根目录，打包后里面的文件会直接放在项目的根路径下。所以你只需要在CSS里用绝对路径指向图片即可，比如：

  .target-element {
    background-image: url('/example.png');
  }
  

  这里的/就代表public文件夹的根路径，CRA会自动识别这个路径，不会触发“src目录之外”的报错——因为这种方式是直接作为静态资源访问，而不是通过import语法导入模块，完美避开了webpack对src外文件的限制。

• 如果图片在public的子文件夹里
  比如你的图片存在public/assets/images/example.png，那路径就写成：

  .target-element {
    background-image: url('/assets/images/example.png');
  }
  

  同样是以/开头，直接从根路径定位到图片位置。

为什么之前会报错？ #

你之前用相对路径（比如../public/example.png）的时候，CRA的webpack配置会把这个路径当成需要导入的模块，但默认情况下webpack不允许导入src目录之外的文件，所以才会抛出那个错误。而用绝对路径的话，就完全绕开了这个模块导入机制，直接访问静态资源，符合CRA的设计规范。

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