为什么图像源中的正斜杠不起作用？

Question

我在文件夹 'www' 中有一个名为 'html_playground' 的文件夹，这是我的 Wampserver 网络根目录。

在目录 'html_palyground' 中，我有一个名为 'demo.html' 的文件，其中包含以下 HTML 代码：

<!DOCTYPE html>
<html>
<body>

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

在文件夹 'html_playground' 中有另一个名为 'images' 的文件夹，其中包含一个名为 'html5.gif'

当我在浏览器中点击 URL http://localhost/html_playground/demo.html 时，我无法看到图像 html5.gif。为什么会这样？

然后我尝试使用以下 HTML 代码：

<img src="images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

然后图片就显示出来了。

所以，我的问题是为什么当我在 src 属性值的开头添加正斜杠时它不起作用？我在 src 属性值的开头添加正斜杠是否有任何错误？

图片标签的src属性值什么时候开始加正斜杠？

有人请帮助我。

谢谢。

Answer 1

开头的正斜杠指示浏览器解析相对于您在 http://localhost/

上的网站根目录的路径

正如您在评论中提到的，这对应于文件系统上的 www/ 目录。所以 /html_playground/images/html5.gif 应该有效

基本上正斜杠只是将指定路径附加到域。

Answer 2

images/html5.gif

以上命令表示它是现有目录的相对路径。

好像你给/images;将其作为基目录（相当于绝对路径）

Answer 3

您也可以尝试 ./images/html5.gif：在相对到 www/html_playground

此外，您必须小心绝对路径并进行实验以确切了解根目录：文件系统、www...可以依赖网络服务器。

Answer 4

当您的源路径中有正斜杠时，它会相对于当前目录进行解析。于是就变成了http://localhost/html_playground/images/html5.gif。当没有正斜杠时，它是相对于根解析的。

Why the forward slash in image source is not working?