HTML中的相对路径

提问者：小点点

我正在localhost上创建一个网站。我想使所有的链接资源在我的网站相对路径（我的意思是只有内部资源）。

网站位于

http://localhost/mywebsite

我读了这个有用的问题绝对网址与相对网址。

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

上述相对路径应返回root_document/images/example.png，因为URL的第一个是/。因为root_document类似于/wamp/www/mywebsite

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

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

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

而且因为更改了MyWebsite的名称，所以它没有什么用处。所以:

匿名用户

您说您的网站位于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

您的URL将显示为:

绝对路径

"/x/X/picture.png"

或者:

相对路径

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

匿名用户

在纯HTML中解决这个问题的最简单方法是使用元素，如下所示:

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

那么HTML中的所有URL都可以是这样的:

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

只需更改以匹配您的服务器。其馀的HTML路径将正好落在一条线上，并将附加到该路径上。

匿名用户

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

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

共3个答案