制作 HTML 時的相對路徑問題。圖片未顯示

Question

以下是代碼

<html>
<h1 style="min-height: 5vh;background-size:cover;color:rgba(79.0,243.0,0.0,1);justify-content: center;display: flex;font-size: 5rem;align-items: center;background-image: url('User Content\abc.svg');">dasfgasdfgadfsg</h1><h1 style="min-height: 100vh;background-size:cover;color:rgba(78.0,224.0,140.0,1);justify-content: center;display: flex;font-size: 5rem;align-items: center;background-image: **url('Images\Builder Section\Heros\Plain and Simple.jpg')**;">Sample
</h1>
</html>

我可以知道如何解決它嗎？ 供參考：builder.tk # 查看代碼的站點

Answer 1

網址總是使用正斜杠： / ，從不使用反斜杠： \

在我看來，您應該使用/而不是\作為url(...)中的分隔符，另外，避免在目錄名稱中使用空格（空格在 URI 中無效：它們需要編碼為%20 ），並且不要忘記在最后一個url(...)周圍的 css 中刪除那些**

此外，不相關，您正在使用兩個h1 ，這是非語義的，您的文檔中應該只有一個 1 級標題

Answer 2

此外，如果目錄名稱中有空格，請始終使用 %20 代替它，因此 url 知道空格是名稱的一部分，而不是分隔符

Answer 3

如果圖像不在同一個文件夾中，您可以使用../導航到父文件夾。

background-image: url('../Images/Builder Section/Heros/Plain and Simple.jpg')

制作 HTML 時的相對路徑問題。圖片未顯示

問題描述

3 個解決方案

解決方案1
1 2021-03-04 11:30:55

解決方案2
-1 2021-03-04 11:38:05

解決方案3
-2 2021-03-04 11:35:00

制作 HTML 時的相對路徑問題。 圖片未顯示

問題描述

3 個解決方案

解決方案1 1 2021-03-04 11:30:55

解決方案2 -1 2021-03-04 11:38:05

解決方案3 -2 2021-03-04 11:35:00

制作 HTML 時的相對路徑問題。圖片未顯示

解決方案1
1 2021-03-04 11:30:55

解決方案2
-1 2021-03-04 11:38:05

解決方案3
-2 2021-03-04 11:35:00