HTML 中的相对路径

Question

我正在

localhost

上创建一个网站。我想让我网站上的所有链接资源都指向相对路径（我的意思是只有内部资源）。

网站位于

http://localhost/mywebsite

我读了这个有用的问题绝对与相对 URLs.

我发现

/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/

:

的子文件夹中

绝对路径

如果您使用绝对路径，

/

将指向site的root，而不是文档的根：

localhost

在您的情况下。这就是为什么您需要指定文档的文件夹才能访问图片文件夹的原因：

"/mywebsite/pictures/picture.png"

这将是一样的：

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

相对路径

A relative path 总是 relative to the document 的 root，所以如果你的 html 在目录的同一级别，你需要直接从你的图片目录开始路径姓名：

"pictures/picture.png"

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

点斜线 (

./

)

Dot (

.

) 指向相同的目录和 slash (

/

) gives access to it:

所以这个：

"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"

Answer 2

在纯 HTML 中解决这个问题的最简单方法是使用

<base href="…">

元素，如下所示：

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

然后您的 HTML 中的所有 URL 都可以是这样的：

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

只需更改

<base href="…">

以匹配您的服务器。其余的 HTML 路径将排成一行并将附加到该路径上。

Answer 3

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

如果您网站的 URL 是：

http://www.example.com/mywebsite/

然后从根级别开始above“mywebsite”文件夹路径。