HTML中的相对路径答案

【问题标题】：Relative path in HTMLHTML中的相对路径
【发布时间】：2014-07-24 13:54:29
【问题描述】：

我正在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 的名称，它没有用。所以：

【问题讨论】：

什么语言？纯 HTML？
是的，它是纯 HTML
当我使用 wampserver 时，这一直发生在我身上。不是 Apache/Web 服务器如何工作的专家，但其想法是服务器在 /var/www/（它的根目录）上运行，您的站点是其中的子文件夹。因此，如果您将 / 设置为绝对 URL，那么它将采用 /var/www/ 的根目录（没有子文件夹），您仍然需要添加 Web 应用程序所在的文件夹。
/var/www/ 只是服务器上的目录。前置 URL 的相对路径与此 100% 无关。
@DA。正确的。但如果它与<base href="…"> 标签一起使用，那就可以了。

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：