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

Question

我正在使用 creat-react-app (CRA)，只是想通过 CSS 包含一个放置在 public 文件夹中的 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 中的某处？我也不想弹出应用程序并删除错误消息。

编辑：这个问题与不同，因为它没有说明如何在 CSS 级别解决这个问题。建议的解决方案是在我不想做的 JavaScript 文件中添加样式。

Answer 1

删除相对路径中多余的..。 :)

Answer 2

只需 在名称 前使用 /，这将使它相对于输出根目录，其中包括 public 文件夹中的所有内容（前提是已完成的托管应用程序在域的根目录中提供服务）。

所以对于上面问的问题：

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

关键部分是

/example.png

指的是文件 example.png，它位于 public 文件夹中（在根级别提供）

也可以是相对的：

也可以用

./example.png

前提是 css 文件也是从 public/build 目录导入的，这将是相对于 css 文件而不依赖于在域根目录中提供的，但是通常在 CRA 中，webpack 会捆绑 CSS，它可能会也可能不会从该位置加载。（您可以直接使用带有 %PUBLIC_URL%/Styles.css 宏的 rel 标签将其导入到 html 文件中）

Answer 3

在我的例子中，要从 css/scss 访问图像，必须将图像目录和字体移动到 src 目录。之后我可以直接在 css/scss 文件中引用它们，

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

参考文献：

https://github.com/facebook/create-react-app/issues/829

https://create-react-app.dev/docs/using-the-public-folder/

Answer 4

使用"./image.png".

背后的逻辑是，当应用程序完成、构建和部署时，您将放置代码的 css 文件将成为 index.html 的一部分。

Answer 5

对我有帮助的唯一方法是将完整的 URL-地址添加到图像路径。所以这个可以帮助：

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

Answer 6

背景图像：url("http:/images/pexels-photo-1.jpg");

Answer 7

官方文档中有专门介绍/public文件夹的页面：
https://create-react-app.dev/docs/using-the-public-folder/

以下是您引用 public 文件夹的方式：

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

或

render() {
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

但是，您不能在 css 文件中使用这些解决方案。因此，您必须从 js 文件中精确获取资源：

const MyComp = () => {
  return <div style={{ backgroundImage: `${process.env.PUBLIC_URL}/img/logo.png` }} />;
}

Answer 8

我正在使用“public”文件夹，但它在这里说要使用“src”文件夹中的图像：

https://create-react-app.dev/docs/using-the-public-folder/

"Normally we recommend importing stylesheets, images, and fonts from JavaScript."

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

Reference file in public folder from CSS in create-react-app

node.js

reactjs

create-react-app