html - HTML 中的相对路径

Question

我正在 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因为/首先是网址。作为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的名称而没有用。所以:

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

Answer 1

你说你的网站在 http://localhost/mywebsite 中，假设你的图片在名为 pictures/ 的子文件夹中:

绝对路径

如果您使用绝对路径，/ 将指向站点 的root，而不是文档的根目录:localhost 在你的例子中。这就是为什么您需要指定文档的文件夹才能访问图片文件夹的原因:

"/mywebsite/pictures/picture.png"

它会是一样的:

"http://localhost/mywebsite/pictures/picture.png"

相对路径

相对路径总是相对于文档的root，所以如果你的html是< em>在目录的同一层级，您需要直接以图片的目录名称开始路径:

"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"