来自create

我正在使用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中的某个位置？我也不想弹出应用程序并删除错误消息。

编辑：这个问题与The create-react-app imports restriction outside of src directory不同，因为它没有显示如何在CSS级别解决此问题。建议的解决方案是在JavaScript文件中添加我不想做的样式。

只需在名称前使用/，这将使其相对于构建输出根，其中包含公用文件夹中的任何内容。

所以对于上面提到的问题：

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

关键部分是

/example.png 

指的是公共文件夹中的文件example.png

来自create

我正在使用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中的某个位置？我也不想弹出应用程序并删除错误消息。

编辑：这个问题与The create-react-app imports restriction outside of src directory不同，因为它没有显示如何在CSS级别解决此问题。建议的解决方案是在JavaScript文件中添加我不想做的样式。

只需在名称前使用/，这将使其相对于构建输出根，其中包含公用文件夹中的任何内容。

所以对于上面提到的问题：

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

关键部分是

/example.png 

指的是公共文件夹中的文件example.png