如何在 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 但反應會拋出此消息

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

我不認為你的App.css文件可以從你的public文件夾中讀取圖像，因為 React 的導入限制來自src文件夾之外（ src 目錄之外的 create-react-app 導入限制）。 相反，向App添加內聯樣式

import "./App.css";

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

export default App;

Answer 2

您正在錯誤的目錄中查找 image.jpeg。 您的 image.jpeg 位於 /public 中，因此請嘗試在background: url("../public/image.jpeg");查找它background: url("../public/image.jpeg"); 而不是background: url("/image.jpeg");

Answer 3

我遇到了背景圖片網址的問題。

在網上，我找到了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保留了相同a/b/c.css ：

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

最后，我了解到，使用絕對路徑適用於所有場景。 也就是說，以下適用於所有級別。

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

以上也意味着，當文件public時使用絕對路徑是無效的。

整件事都在這里。

進一步參考：

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