在学习HTML的img标签时，需要将图片的地址引入到文件中，这个时候，都会感觉有些犯难。

因为引入了总是不对，页面中显示了图片，但是并不是我想要展示的图片。

看到的会是上边的一种展现方式，感觉有一个图片，但是又不是自己的，上边的展示代表的含义是“图片引入未成功”

如何可以正确引入图片呢？下面来看小陈老师的路径解读。

什么是相对路径？

单说这个名词，同学们可以会有些疑惑，如果小陈老师提出：参照物这个概念，好多同学就会恍然大悟，这是物理上的一个名词。和这个相对路径很相似。

相对路径：就是参照某一个文件，对图片进行引入。

小陈老师做了一个大致的目录结构，我们可以看一下：

在这个目录结构中，有两个文件，一个是gif的图片，一个是html的网页文件。

我们如何把这个图片引入到html文件中呢？谁又是那个参照物呢？

这个非常好获取参照物，要把图片引入到img.html文件中，那么img.html就是那个参照物，要参照他来写路径。

现在图片和img.html在同一个目录下，在写的时候，只需要写同级就可以，如图：

小陈老师用了两种写法，最后的结构都是将图片进行了引入到了html中。展示的效果如图：

这两种有什么区别么？其实没有区别。

在相对路径中，有三个特殊含义的字符，分别是“./”、"…/"和”/“。

./:代表的当前目录

…/:代表的是上一级目录

/:代表跟目录，在win下指的是c盘，在linux下是跟目录，基本不用

这个知识很重要，同学们要记住奥！

上边小陈老师已经展示了“./”的使用案例，下边小陈老师展示一个“…/的使用案例”。

我们先把基础的目录结构稍微改变一下。

在html下面，包含的是img.html，在img下面包含gif图片，这时候我们相对，img.html如何引入图片呢？

首页找好参照物，然后找好两个文件，在哪一级是同一个父级。

参照物还是img.html文件，相同的父级是”图片引入“这级目录。

第一步：如何从img.html所在的文件下，走到”图片引入“这一级。

通过目录结构我们可以发现，我们只要后退一级就可以了，那如何在代码中体现后退呢？用”…/“就可以了，一个”…/“代表后退一级。

走到了共同的父级下，如何找到图片呢，需要进入img目录下，进入某一个文件夹下，直接写文件夹的名字就可以了。

所以最后引入的写法是这样的：

这样图片就引入成功了。

相对路径的使用你学会了吗？没有的话，欢迎前来咨询小陈老师奥！

什么是绝对路径呢？

绝对路径就是固定的一个目录，说白了就是一个死目录。

我们引入gif图片的绝对路径如何写呢？

非常简单，直接拷贝目录结构即可。

直接复制圈红的内容，加上文件的字写入文本框下就可以了。

什么是网络路径呢？

指的是通过http协议进行访问的路径。

例如我们通过百度图片复制的图片地址：

https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595415566824&di=4f03c7d35b7d35c3572f9eee7b86898e&imgtype=0&src=http%3A%2F%2Ft7.baidu.com%2Fit%2Fu%3D3616242789%2C1098670747%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D900%26h%3D1350

这就是网络路径，网络路径可以直接放在src文件夹下，然后图片即可正常显示。

绝对路径和相对路径有什么区别呢，一个是固定地址一个是相对地址。

可能同学们心中会想，绝对路径多么简单，不用去找关系。

但是绝对路径是有弊端的，当我们复制自己的项目给其他人的时候，不是只给一个html文件，是把html包含的其他内容也提供的。

这时候我们需要压缩的文件是图片引入这个文件夹。

针对相对路径，图片还能正常显示，但是绝对路径就不会正常显示了，因为图片虽然还是在图片引入的img文件夹下，但是别人不一定是放在D盘下的个人资料文件夹下奥！

所以在写路径的时候，一定要使用相对路径奥！

那网络路径和相对路径应该使用那个呢？

两个都可以使用。

网络路径的优点是不占用本地资源，缺点是当路径不能访问了，页面中的图片也就丢失了。

相对路径的优点就是图片永远都能访问，缺点是占用本地硬盘和带宽。

所以这三者的使用，要根据具体场景奥！

转发文章，请注明出处！