相对路径和绝对路径

相对路径和绝对路径，往往都是初学者最困惑的知识点之一。在这一节，我们详细跟大家探讨一下这两者的区别和写法。

我们在C盘目录下建立一个网站，网站名称为“BookTest”，这个网站下的目录内容如下：

我们先温习上一节学到的<img>标签的语法：

<img src=”图像源文件路径” alt=”图片无法显示时的提示文字” title=”鼠标经过图片时的提示文字”/>

在img标签中，要想正确在浏览器显示图像，我们必须给出图像的准确路径，即<img>标签的src属性。在接下来，我们用“网页1”和“网页2” 分别去引用images文件夹下的海贼王图片，从而多方面来认识相对路径和绝对路径的区别。

一、“网页1”引用海贼王图片

如果在“网页1”引用“海贼王”这张图片，则图片路径有两种写法：

• 写法一：<img src=”images/海贼王.jpg” alt=”海贼王” />
• 写法二：<img src=”c:/BookTest/images/海贼王.jpg” alt=”海贼王”/>

以上两种方法都能达到效果。为什么呢？这就是相对路径和绝对路径的问题。

1、相对路径

写法一采用了“相对路径”方法，所谓的相对路径，就是在同一个网站下，不同文件之间的的位置定位。我们分析一下，“网页1”和images文件夹位于网站BookTest根目录下，而海贼王图片位于images文件夹下，那么src应该是“images/海贼王.jpg”。

那有同学就会问，那下图2中，“网页1”如果要引用海贼王图片的相对路径怎么写呢？

答案应该是：<img src=”海贼王.jpg” alt=”海贼王”/>。这个时候网页1与海贼王图片位于同一目录下。

2、绝对路径

对于写法二，采用的是“绝对路径”方法，所谓的绝对路径就是完整的路径。

二、“网页2”引用海贼王图片

我们再回到图1中的目录内容，如果在“网页2”引用“海贼王”这张图片，图片路径也有两种写法：

• 写法一：<img src=”../images/海贼王.jpg” alt=”海贼王”/>
• 写法二：<img src=”c:/BookTest/images/海贼王.jpg” alt=”海贼王”/>

1、相对路径

同样，写法一是相对路径写法，而写法二是绝对路径写法。我们分析一下，“网页2”位于test文件夹下，而海贼王图片位于images文件夹下。因此，相对于“网页2”，海贼王图片位于“网页2”上一级目录下的images文件夹下。因此，src的写法为“../images/海贼王.jpg” alt=”海贼王”。其中“../”表示上一级目录，大家要懂得这种写法。

现在就可以对相对路径写法进行总结了。相对路径的写法首先就是要分析当前网页的位置和图像的位置之间的关系，然后用一种方式把他们之间的相对关系表达出来。

2、绝对路径

写法二是“绝对路径”写法，跟“网页1”引用海贼王图片的写法一样。绝对路径，只要你的图片没有移动到别的地方，所有网页引用该图片的路径写法都是一样的。大家稍微想一下就懂了。

三、图片路径容易写错怎么办？

在一个网页引用图片，最烦人的一点就是往往容易把路径给写错，然后在浏览器图片没办法显示出来。那有什么简单方法防止出错呢？

在Visual Studio网页中，如果要在页面引用一张图片，我们只需要采取一个小技巧就可以让你的图片路径准确表达出来。

我们打开一个网页，然后用鼠标拖拽着图片到你网页代码处：

当图片被拖拽到代码处之后， Visual Studio自动生成<img>标签代码：

大家会惊奇地发现，系统自动生成了<img>标签代码，而且图片的路径src都自动生成了。这样我们以后引用图片都不需要自己手动写图片的src了。

系统自动生成的都是相对路径，对于一个网站来说，外部文件或图片的引用都是使用相对路径，几乎不用绝对路径，大家要非常清楚这一点。

疑问

1、为什么我使用绝对路径时，图片不能显示出来？

当我们使用绝对路径时，往往编辑器都不能把图片的路径解析出来，因此图片无法在网页中显示出来。在真正的网站开发中，对于图片或者引用文件的路径，我们100%都是使用相对路径的。因此，大家不必纠结绝对路径问题，只需要掌握相对路径的写法即可。

总结

1、相对路径和绝对路径：

（1）相对路径，就是在同一个网站下，不同文件之间的的位置定位。引用的文件是相对当前网页的位置而言的，根据这个相对位置得出相对路径。

（2）绝对路径，指的是完整的路径。

2、在visual studio中引用图片，都是采用拖拽方式自动生成代码；

3、对于一个网站而言，外部文件或图片的引用都是使用相对路径，几乎不用绝对路径。

今天的文章相对路径和绝对路径分享到此就结束了，感谢您的阅读。