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"

但是还有其他相对路径的好处：

点斜线（./）

Dot （ . ）指向同一目录，斜杠（ / < / strong>）为其提供访问：

所以这个：

"pictures/picture.png"

与此相同：

"./pictures/picture.png"

双点斜线（../）

在这种情况下，双点（ .. ）指向上部目录，同样也指向斜杠（ / ）可让您访问它。因此，如果您想访问位于文档当前目录上一级目录的图片，您的网址将如下所示：

"../picture.png"

你可以随心所欲地玩它们，一个小例子就是这样：

让我们说您已进入目录 A ，并且您想要访问目录 X 。

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

您的网址会显示：

绝对路径

"/x/X/picture.png"

或者：

相对路径

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

Answer 2

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

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

然后，HTML中的所有网址都可以是：

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

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

Answer 3

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

如果您网站的网址为：http://www.example.com/mywebsite/，则从根级别开始以上＆＃34; mywebsite＆＃34;文件夹路径。

Answer 4

这样的带有2个正斜杠的路径如何？

content="//254955-793725-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2019/09/Chart.png"