制作 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