80

我正在创建一个网站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由于/首先是 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 的名称，它没有用。所以：

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

3 回答 3

132

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

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

假设您在 directory 上A，并且想要访问 directory X。

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

您的 URL 可能是：

绝对路径

"/x/X/picture.png"

或者：

相对路径

"./../x/X/picture.png"
于 2014-06-04T04:04:59.917 回答
60

在纯 HTML 中解决这个问题的最简单方法是<base href="…">像这样使用元素：

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

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

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

只需更改<base href="…">以匹配您的服务器。其余的 HTML 路径将正好对齐并附加到该路径中。

于 2014-06-04T03:45:50.187 回答
3

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

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

于 2014-06-04T03:41:27.113 回答