提供绝对的URL地址

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了提供绝对的URL地址相关的知识,希望对你有一定的参考价值。

我试图了解绝对和相对的Url地址;然而,当我尝试锻炼时,我无法解决它。这是练习:

给定以下URL地址http://www.unsite.org/a/b/index.html,文档index.html包含3个亲属URL地址: <img src="../logo.png" alt="Logo de l’entreprise"/> //Line 1 <img src="/images/logo.png" alt="Logo de l’entreprise"/> //Line 2 <img src="images/logo.png" alt="Logo de l’entreprise"/> //Line 3

给出每个的相应绝对URL。 -__-。 有人也可以解释Line 2Line 3之间的区别吗?

我理解(对于第2行和第3行)logo.png位于images文件夹中,该文件夹与index.html位于同一目录中。对于Line 1 logo.png在index.html的父文件夹中,这几乎是我理解但我仍然不知道如何解决这个练习。

答案

第2行<img src="/images/logo.png" alt="Logo de l’entreprise"/>将尝试从相对于根网站目录定义的路径加载图像。

示例:如果您的域名是www.yourwebsite.com,当前网页是www.yourwebsite.com/folder/page.html,那么它将尝试从http://www.yourwebsite.com/images/logo.png加载图像

第3行<img src="images/logo.png" alt="Logo de l’entreprise"/>将尝试相对于网页的当前目录加载图像。

示例:如果您的域名是www.yourwebsite.com,当前网页是www.yourwebsite.com/folder/page.html,那么它将尝试从http://www.yourwebsite.com/folder/images/logo.png加载图像

另一答案

鉴于http://www.unsite.org/a/b/index.html

<img src="../logo.png" alt="Logo de l’entreprise"/> //Line 1

http://www.unsite.org/a/logo.png


<img src="/images/logo.png" alt="Logo de l’entreprise"/>  //Line 2

http://www.unsite.org/images/logo.png


<img src="images/logo.png" alt="Logo de l’entreprise"/> //Line 3

http://www.unsite.org/a/b/images/logo.png
另一答案

如果您有机会,请在Windows资源管理器或查找程序中打开部署文件夹时查看这些行。

我认为这是你的文件夹结构。

ROOT
|----images/logo.png (line2)
|----a
|    |-----b
|    |     |----index.html
|    |     |----images/logo.png (line3)
|    |
|    |---logo.png (line 1)

index.html位于root / a / b /文件夹中。

如您所见,index.html所在的同一位置有一个images文件夹,images文件夹中有logo.png文件(第3行)

b的父文件夹是文件夹a。这是另一个logo.png文件的位置。 (第1行)

最后根部还有另一个图像文件夹。那里还有另一个logo.png。 (第2行)

到处都有相同的名字使得思考比实际上更复杂。重命名每个文件并修复HTML文件可能有助于您更好地理解它。干杯。

另一答案

第2行前面有/,这意味着“从网络主机的根目录开始”绝对URL将是http://www.unsite.org/images/logo.png

第3行没有/in前面因此它应该从当前url开始查看完整路径,绝对URL将是http://www.unsite.org/a/b/images/logo.png

以上是关于提供绝对的URL地址的主要内容,如果未能解决你的问题,请参考以下文章

Nginx 配置反向代理后,页面中取绝对URL地址的问题显示代理端口

AngularJS UI-Router:带参数获取状态的绝对 URL

JS获取URL的参数

background-image中url使用绝对地址不显示图片,相对地址要怎么使用,用的是内部样式

js如何将绝对url传入到img标签的src中

webpack 跨域 proxy url地址后面被匹配的坑 模糊 绝对地址