来自create-react-app中CSS的公用文件夹中的参考文件

Question

我正在使用creat-react-app（CRA），只是想通过CSS将放置在公共文件夹中的png文件包括在内（我将所有图像文件保存在此）。现在，我尝试通过CSS引用此图像（我仅将background-image行添加到了新生成的CRA应用中）：

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
  background-image: url("../public/example.png");
}

You attempted to import example.png which falls outside of the project src/ directory

如何在CSS文件中引用图像文件而不在其中复制内容/src？我也不想弹出应用程序并摆脱错误消息。

编辑：此问题不同于src目录外部的create-react-app导入限制，因为它没有显示如何在CSS级别解决此问题。建议的解决方案是在我不想执行的JavaScript文件中添加样式。

Answer 1

只需在名称前使用/，这将使其相对于构建输出根目录，该根目录包括公用文件夹中的所有内容。

所以对于上面的问题：

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
  background-image: url("/example.png");
}

关键部分是

/example.png 

引用公共文件夹中的文件example.png