HTML 中的相对路径

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

网站位于

http://localhost/mywebsite

我读了这个有用的问题 绝对 URL 与相对 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>

因为改变了我的网站的名字，所以它没有用:

  • 为什么会出现这个问题？
  • 我该如何解决这个问题？
219858 次浏览
小开

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

如果您的网站的 URL 是: http://www.example.com/mywebsite/，然后从根级启动 以上的“ mysite”文件夹路径。

小开

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

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

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

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

只需更改 <base href="…">以匹配您的服务器。其余的 HTML 路径将按顺序排列，并将被附加到该路径之后。

小开

你说你的网站是在 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

你的网址应该是:

绝对路径

"/x/X/picture.png"

或者:

相对路径

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

提交答案