HTML中的相对路径

Question

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

网站位于

http://localhost/mywebsite

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

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

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

上面的相对路径应该返回,ROOT_DOCUMENT/images/example.png因为/首先是url.就像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"

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

dot-slash(./)

Dot(.)指向同一目录,斜杠(/)允许访问它:

所以这:

"pictures/picture.png"

会是这样的:

"./pictures/picture.png"

双点斜线(../)

在这种情况下,双点(..)指向上层目录,同样,斜杠(/)使您可以访问它.因此,如果您想访问位于文档当前目录上一级目录的图片,那么您的网址将如下所示:

"../picture.png"

你可以随心所欲地玩它们,一个小例子是这样的:

假设你在目录上A,并且想要访问目录X.

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

您的网址会显示为:

绝对的道路

"/x/X/picture.png"

要么:

相对路径

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

Answer 2

在纯HTML中解决此问题的最简单方法是使用如下<base href="…">元素:

<base href="http://localhost/mywebsite/" />

然后,HTML中的所有网址都可以是:

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

只需更改<base href="…">以匹配您的服务器.其余的HTML路径将会排成一行并附加到其中.

Answer 3

相对路径基于客户端的文档级别，即在浏览器中看到的文档的 URL 级别。

如果您网站的 URL 是：http://www.example.com/mywebsite/则从根级别开始，从“mywebsite”文件夹路径上方开始。