如何在 React.Js 中设置背景图像 css？

Question

这是我的树文件夹

├── public
│   ├── favicon.ico
│   ├── image.jpeg
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

这是我的App.css

.App {
  text-align: center;
  background: url("/image.jpeg");
}

这是我的 App.js

import "./App.css";

function App() {
  return (
    <div className="App">
      <h1>asdasdasd</h1>
    </div>
  );
}

export default App;

我正在尝试向 App.js 添加背景图像，但 react 会抛出此消息

Failed to compile.

./src/App.css (./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 '/image.jpeg' in '/home/ivan/Documents/code/REactJs/portafolio/src'

我是 ubuntu 20 的开发者，节点版本是 v12.19.0

顺便说一句，我昨天创建了这个应用程序，但我没有工作，但我有一个一个月前创建的旧应用程序，它工作正常。

Answer 1

我遇到了背景图片网址的问题。

在网上，我找到了2个答案：

1. 如果图片保存在public目录下，请使用绝对路径。
2. 如果图片保存在src目录下，请使用相对路径。

我观察到，如果 css 文件或样式位于 src 目录的一个或多个级别，则这些答案不起作用。

├── public
│   ├── favicon.ico
│   ├── image.jpeg
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── a
    │   └── b
    │       ├── c.js
    │       └── c.css
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── images
    │   └── sample.png
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

以下内容将起作用，因为.logo 保存在src/index.css 中：

.logo {
  background-image: url(images/sample.png)
}

但是，以下内容不会，因为 a/b/c.css 中保留了相同的内容：

.logo {
  background-image: url(images/sample.png)
}

最后，我了解到，使用绝对路径适用于所有场景。也就是说，以下内容适用于所有级别。

.logo {
  background-image: url(/images/sample.png)
}

以上也意味着，文件保存在public时使用绝对路径是无效的。

整个事情都是here。

进一步参考：

1. https://stackoverflow.com/a/69615870/6999951
2. https://surajsharma.net/blog/background-image-in-react

Answer 2

我认为您的 App.css 文件不能从您的 public 文件夹中读取图像，因为 React 对 src 文件夹 (The create-react-app imports restriction outside of src directory) 之外的导入限制。相反，将内联样式添加到 App

import "./App.css";

function App() {
  return (
    <div className="App" style={{ backgroundImage: "url('/image.jpeg')" }}>
      <h1>asdasdasd</h1>
    </div>
  );
}

export default App;

Answer 3

您在错误的目录中查找 image.jpeg。 您的 image.jpeg 位于 /public，因此请尝试在 background: url("../public/image.jpeg"); 中查找它 而不是background: url("/image.jpeg");