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

【问题标题】：Why the forward slash in image source is not working?为什么图像源中的正斜杠不起作用？
【发布时间】：2017-03-22 22:39:29
【问题描述】：

我在文件夹“www”中有一个名为“html_playground”的文件夹，这是我的 Wampserver 的 Web 根目录。

在“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' 的图像文件/p>

当我在浏览器中点击 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 属性值的开头添加正斜杠是否有任何错误？

image标签的src属性值什么时候应该在开头加上斜杠？

请有人帮帮我。

谢谢。

【问题讨论】：

【解决方案1】：

开头的正斜杠指示浏览器在http://localhost/上解析相对于您的Web根目录的路径

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

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

【讨论】：

【解决方案2】：

事情是当你的源路径中有一个正斜杠时，它会相对于当前目录得到解析。所以它变成了http://localhost/html_playground/images/html5.gif。当没有正斜杠时，它相对于根进行解析。

【讨论】：

【解决方案3】：

图像/html5.gif

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

好像你给 /images;它把它作为一个基本目录（它就像绝对路径）

【讨论】：

【解决方案4】：

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

时，前导斜线使您的路径绝对

此外，您必须小心绝对路径并通过实验来确切了解根目录：filesystem、www...它可以依赖于网络服务器。

【讨论】：