HTML中的相对路径

Question

我正在localhost上创建一个网站。我想使网站中的所有链接资源都变成相对路径（只指内部资源）。

网站位于

http://localhost/mywebsite

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

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

<a href="/images/example.png"> 链接到图片</a>

由于URL开头的/，上面的相对路径应该返回ROOT_DOCUMENT/images/example.png。因为ROOT_DOCUMENT是像/wamp/www/mywebsite这样的东西。

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

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

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

修改我的网站名称并不会有什么用，所以：

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

- Amir

---

什么语言？纯HTML？ - Giacomo1968

是的，它是纯HTML。 - Amir

每当我使用wampserver时，这种情况总是发生。虽然不是Apache / Web服务器工作方式的专家，但基本思路是服务器在/ var / www /（其根目录）上运行，而您的站点是其中的一个子文件夹。因此，如果您将/放置在绝对URL中，则它会采用根目录即/var/www/（没有子文件夹），您仍需要添加Web应用程序所在的文件夹。 - Alvaro Montoro

“/var/www/” 简单来说就是服务器上的目录。前端 URL 的相对路径完全与此无关，毫无关联。 - Giacomo1968

@DA。正确。但是如果与<base href="…">标签一起使用，那就可以工作了。 - Giacomo1968

Answer 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

您的URL将会是以下两种情况之一：

绝对路径

"/x/X/picture.png"

或：

相对路径

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

- arielnmz

---

非常感谢，那么如果我将我的代码转移到主机上，那么这行代码就是指文档根目录下的 **"/pictures/picture.png"**，一切都能正常工作吗？ - Amir

Answer 2

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

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

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

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

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

- Giacomo1968

Answer 3

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

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

- Michael Adamission