003-前端学习-图片路径详解

图片路径名称：图片的src属性

（1）绝对路径：电脑的盘幅存储的绝对地址

举例：编写代码如下：

运行结果如下：

 

（2）相对路径：两者相对关系，两者在同一路径下可以直接访问

1.如果是子级关系，通过/一层层往下找。

如：pic3就是images的子级，images和pic1、pic2是同一级的

 代码编写：我在网页路径详解.html的body中输入images后，当输入/就出现了提示，然后可以选择并回车

 显示结果：

2.父级关系,通过../返回到上一级

如下所示，我重新建立了src文件夹，其中的src是相对路径.html的父级，而src和pic1.png是同级关系，所以，相对来说，pic1.png是相对路径.html的父级.

 当我输入../之后，后面就出现了提示，我们可以根据提示选择自己需要访问的图片。这样就是在子级编写的情况下，通过../返回到上一级中，然后访问父级。

 运行结果如下：

 3.同级关系通过./进行访问，但./可以省略

代码和运行结果如下：

     

（3）网络路径：直接通过网络访问的地址

如：http://bbsfiles.vivo.com.cn/vivobbs/attachment/forum/201601/24/175433rossj7cn74vksn4p.jpg

在我们写代码时，直接将网络图像地址放到src中就行了，下面看代码和运行结果：