ReactJS项目src目录引用public文件夹图片报错如何解决

create-react-app 3.4.0 默认的构建规则限制了src目录下的代码只能引用src内部的资源，public目录属于src的外部范围，因此使用相对路径访问../public下的资源会触发导入拦截。

• 方案1：将图片移入src目录（推荐）
  你可以在src下新建assets/images类的资源文件夹，将background.jpg移动到该文件夹内，之后在App.css中用相对路径引用即可：

  background-image: url("./assets/images/background.jpg");
  

  该方案下webpack会自动对图片做哈希重命名、压缩等优化，适合绝大多数项目内使用的静态资源场景。

• 方案2：直接使用public目录的绝对路径
  public目录下的所有资源最终都会被原封不动拷贝到构建产物的根目录，不需要写相对路径定位public文件夹，直接用根路径引用即可：

  background-image: url("/background.jpg");
  

  该方案适合不需要webpack处理、需要固定访问路径的资源场景。

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