html - HTML 中的相对路径

Question

我正在localhost上创建一个网站。我想将我网站中的所有链接资源设置为相对路径(我的意思是仅内部资源)。

网站位于

http://localhost/mywebsite

我读到了这个有用的问题 Absolute vs relative URLs .

我发现 /images/example.png 之间存在差异和images/example.png

<a href="/images/example.png"> Link To Image</a>

以上相对路径应返回 ROOT_DOCUMENT/images/example.png因为/在网址的开头。如ROOT_DOCUMENT类似于 /wamp/www/mywebsite

但是当我测试它时，它只返回 /wamp/www/images/example.png

我应该手动添加我的网站文件夹 /mywebsite/images/example.png相对路径。

<a href="mywebsite/images/example.png"> Link To Image</a>

并且由于更改了 mywebsite 的名称而没有用。所以:

• 为什么会出现这个问题？
• 如何解决这个问题？

Answer 1

您说您的网站位于 http://localhost/mywebsite 中，假设您的图像位于名为 pictures/ 的子文件夹中:

绝对路径

如果您使用绝对路径，/ 将指向站点的根，而不是文档的根:在您的情况下:localhost。这就是为什么您需要指定文档的文件夹才能访问图片文件夹:

"/mywebsite/pictures/picture.png"

它与以下内容相同:

"http://localhost/mywebsite/pictures/picture.png"

相对路径

相对路径始终相对到文档的根，因此，如果您的 html 与目录处于同一级别，则需要直接以图片的目录名称开始路径:

"pictures/picture.png"

但是相对路径还有其他好处:

点斜杠 (./)

点 (.) 指向同一目录，斜杠 (/) 授予访问权限:

所以这个:

"pictures/picture.png"

与此相同:

"./pictures/picture.png"

双点斜杠 (../)

在本例中，双点 (..) 指向上级目录，同样，斜杠 (/) 允许您访问它。因此，如果您想访问文档当前目录上一级目录中的图片，您的 URL 将如下所示:

"../picture.png"

您可以随心所欲地使用它们，一个小例子是这样的:

假设您位于目录A，并且您想要访问目录X。

- root
   |- a
      |- A
   |- b
   |- x
      |- X

您的网址将如下所示:

绝对路径

"/x/X/picture.png"

或者:

相对路径

"./../x/X/picture.png"