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

Posted 2023-03-07

【中文标题】来自 create-react-app 中 CSS 的公共文件夹中的参考文件

【英文标题】：Reference file in public folder from CSS in create-react-app

【发布时间】：2018-07-28 05:57:40

【问题描述】：

我正在使用 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 文件中添加样式。

【问题讨论】：

The create-react-app imports restriction outside of src directory的可能重复

我认为url() 中多了一个..。我不知道我犯了多少次同样的错误。

@FaizuddinMohammed 这是我的问题的解决方案！

这能回答你的问题吗？ React path to public folder in css background image

【参考方案1】：

只需在名称前使用 /，这将使其相对于输出根目录，其中包括公共文件夹中的任何内容（前提是完成的托管应用程序在域的根目录中提供） .

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

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

关键部分是

/example.png 

指的是公用文件夹中的文件 example.png（在根级别提供）

也可以是相对的：

也可以使用

./example.png

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

【讨论】：

如果您的 PUBLIC_URL 与 '/' 不同，则不会这样做

@rickerp 相对 url 取决于 css 是否通过 webpack 导入，或者 css 本身是否从外部加载，例如从公共文件夹加载。 url() 是一个 css 函数，浏览器会根据浏览器对 css“文件”位置的理解来解释结果。在大多数情况下，这里用“/”引导它使其成为“根相对”（这就是为什么它在大多数情况下都可以工作，不管它是如何导入的，只要应用程序是从根域提供的。你是对的，它它可能无法嵌套在子目录中。

【参考方案2】：

在我的例子中，要从 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/

【讨论】：

感谢您的回答。我可以看到，我现在在 CRA 中的 CSS 文件实际上已经找到了这些图像（在我将图像文件夹放在 /public 之前）并且没有任何工作。但是我的应用程序仍然无法编译，并且出现以下错误：./src/App.css (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css) Error: Can't resolve '/images/img-2.jpg' in '/Users/jameshubert/Documents/Programming/100DaysOfReact/day-20-briandesign-react-website/src'

【参考方案3】：

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

【讨论】：

我回答的时候多了两个点。由于某种原因，他们被从问题中删除。

正确。一位..

那么这会产生一个像链接副本一样的构建错误。

它不是为 OP ??‍♂️

为什么这是一个答案？删除点并不能修复错误消息。

【参考方案4】：

使用"./image.png"。

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

【参考方案5】：

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

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

【参考方案6】：

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

【参考方案7】：

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

以下是您应该如何引用公用文件夹：

<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`  />;