Question

有什么区别？谢谢。

<img src="images/file.jpg"></img>

between

<img src="/images/file.jpg"></img>

between

<img src="./images/file.jpg"></img>

between

<img src="../images/file.jpg"></img>

Answer 1

您需要了解relative and absolute paths。

以下是我对您的示例的解释，但您应该阅读该链接以了解这些概念。

如果基本网址是“http://example.com/resources/”，那么：

<img src="images/file.jpg"></img>

将获得：

http://example.com/resources/images/file.jpg

它只是将src url添加到基本URL。

<img src="/images/file.jpg"></img>

将获得：

http://example.com/images/file.jpg

将图片网址设为root（以/开头），然后使用该域并将图片src添加到域中。

<img src="./images/file.jpg"></img>

将获得：

http://example.com/resource/images/file.jpg

在这种情况下，它使用当前目录（.）的相对路径，这是基本目录（资源）。

<img src="../images/file.jpg"></img>

将获得：

http://example.com/images/file.jpg

在这种情况下，它使用父目录（..）的相对路径，这使得它上升到一个目录，然后添加路径的其余部分。

Answer 2

第一个，第三个和最后一个是相对于当前路径的。在最后一个中，..是父文件夹，这意味着您基本上提升了层次结构中的一个级别，而在第二个级别.是当前文件夹，使URI等同于第一个。第二个是相对于根，因为它以/开头。详细了解HTML4 spec中的URI，或一般关于Unix-style paths的内容。

因此，如果您在website.com/folder/folder/index.html，则四个URI将等同于此：

website.com/folder/folder/images/file.jpg
website.com/images/file.jpg
website.com/folder/folder/images/file.jpg
website.com/folder/images/file.jpg

HTML不同的链接类型问题

2 个答案: