如何將 url 用於本地圖像以在 css 中設置背景圖像

Question

我嘗試在 css 中使用本地圖像作為背景圖像，然后我使用 這種用法，但它不起作用。 為什么？

background-image: url("pexels.jpg");
/* I use both of them*/
background-image: url("images\pexels.jpg");
/* this image is under my images folder on my project*/

我像那樣復制圖像路徑，但它仍然無法正常工作。

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

而且這種方法不起作用

它僅適用於 http 鏈接：

background-image: url("https://images.pexels.com/photos/796607/pexels-photo-796607.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");

這行得通

 url("/images/pexels.jpg");

Answer 1

也許你應該改變

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

至

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

Answer 2

將 url 更改為

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

Answer 3

您的代碼是正確的，但您需要傳遞本地圖像的正確路徑。 這是我的文件夾結構，我將圖像放在我的項目中，並且我正在像這樣訪問：

background-image: url(../../../assets/images/bg.png);

我在我的子組件中使用它，您需要檢查您的組件存在的級別，並相應地放置正確的路徑。

Answer 4

您不應該使用那里的斜杠（反斜杠） 對於目錄，您應該使用正斜杠 /

body {
    background-image:url("images/pexels.jpg");
}