HTML 中的相对路径

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

网站位于

http://localhost/mywebsite

我读了这个有用的问题绝对 URL 与相对 URL https://stackoverflow.com/questions/2005079/absolute-vs-relative-urls.

我发现了之间的差异/images/example.png and 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 的名称而没有用。所以：

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

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

绝对路径

如果您使用绝对路径, /会指向root of the site，不是文档的根目录：localhost在你的情况下。这就是为什么您需要指定文档的文件夹才能访问图片文件夹：

"/mywebsite/pictures/picture.png"

它将与以下内容相同：

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

相对路径

A 相对路径总是relative to the root of the document，所以如果你的html是处于同一水平的目录，您需要直接使用图片的目录名称来启动路径：

"pictures/picture.png"

但相对路径还有其他好处：

点斜线 (./)

Dot (.) 指向同一目录并且slash (/) 提供访问权限 to it:

So this:

"pictures/picture.png"

会是这样的：

"./pictures/picture.png"

双点斜杠 (../)

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

"../picture.png"

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

假设您在目录中A，并且您想要访问目录X.

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

您的网址将如下所示：

绝对路径

"/x/X/picture.png"

Or:

相对路径

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