HTML中的相对路径 [英] Relative path in HTML

问题描述

我正在 localhost 上创建网站。我想将我网站上的所有链接资源都设置为相对路径（我的意思是只有内部资源）。

网站位于

  http：// localhost / mywebsite 
  

我阅读了绝对vs相对URL 这个有用的问题。

我发现 /images/example.png 和 images / example.png

< a href =/ images / example.png>链接到图片< / 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>链接到图片< / a> 
  

而且它没有用，因为更改了mywebsite的名称。因此：

• 为什么会出现此问题？


• 如何解决此问题？
li>

解决方案

您说您的网站位于 http：// localhost / mywebsite ，假设您的图片位于名为 pictures / 的子文件夹中：

绝对路径

如果您使用绝对路径， / 会指向站点的根，而不是文档的根目录： localhost 。这就是为什么你需要指定文件的文件夹才能访问图片文件夹：

 / mywebsite / pictures / picture.png 
  

它会和以下内容一样：

 http：//localhost/mywebsite/pictures/picture.png
  

相对路径
$ b 相对路径总是相对到文档的根，因此如果您的html在目录的 处于相同级别，则需要直接启动路径与您的图片的目录名称：

 pictures / picture.png
  

但是还有其他额外的相对路径：

dot-slash（<$ c
$ b

点（ ./ ） 。 ）指向相同的目录和斜杠（ / ） giv

所以这个：

 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
  

I am creating a website on localhost. I want to make all of link resources in my website to relative path ( I mean only internal resources).

website is located in

http://localhost/mywebsite

I read this useful question Absolute vs relative URLs.

I found differences between /images/example.png and images/example.png

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

Above relative path should return ROOT_DOCUMENT/images/example.png because of / at first of url. As ROOT_DOCUMENT is something like /wamp/www/mywebsite

But when I tested it, it only return /wamp/www/images/example.png

And I should add manually my website folder /mywebsite/images/example.png to relative path.

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

And it is not useful because of changing the name of mywebsite. So:

• Why does this problem occur?
• How can I resolve this problem?

解决方案

You say your website is in http://localhost/mywebsite, and let's say that your image is inside a subfolder named pictures/:

Absolute path

If you use an absolute path, / would point to the root of the site, not the root of the document: localhost in your case. That's why you need to specify your document's folder in order to access the pictures folder:

"/mywebsite/pictures/picture.png"

And it would be the same as:

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

Relative path

A relative path is always relative to the root of the document, so if your html is at the same level of the directory, you'd need to start the path directly with your picture's directory name:

"pictures/picture.png"

But there are other perks with relative paths:

dot-slash (./)

Dot (.) points to the same directory and the slash (/) gives access to it:

So this:

"pictures/picture.png"

Would be the same as this:

"./pictures/picture.png"

Double-dot-slash (../)

In this case, a double dot (..) points to the upper directory and likewise, the slash (/) gives you access to it. So if you wanted to access a picture that is on a directory one level above of the current directory your document is, your URL would look like this:

"../picture.png"

You can play around with them as much as you want, a little example would be this:

Let's say you're on directory A, and you want to access directory X.

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

Your URL would look either:

Absolute path

"/x/X/picture.png"

Or:

Relative path

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

这篇关于HTML中的相对路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！