对于初学者来说,都有过这样一段傻逼的经历: 信心满满的做完一个页面,再把这个页面上传到网上,或者传给别人之后发现里面的图片不显示了。关键还不知道哪儿错了 -_- 问题就出在图片路径不正确。就像上上节课讲的那样,显示的是alt信息。 而且在制作这个页面的过程当中使用的是绝对路径。而非相对路径。 如下:显示的是J盘上的lucy.jpg文件。
lucy
为什么要用相对路径? 通俗讲,相对路径就是相对于当前文件的路径。 使用相对路径的好处就是,只要每个文件都在对方的相对某个位置,将他们整体移动的时候,他们的相对位置还是不变的。 即,如果使用的是相对路径,网站搬家的时候代码里的路径依然是正确的。 绝对路径就是,目标文件的准确位置的路径。 就像例子当中的图片,在当前计算机J盘的***位置。 如果换到别的电脑上,如果图片不在对方电脑的J盘的***位置,那图片肯定不显示啊。 举例:有这样的一个文件结构。 计算机C盘下有个文件夹sites。 sites文件夹里面有个lucy.html文件和img文件夹。 如下所示: jiegou img文件夹里还有个lucy.jpg图片文件(未在上图中显示)。 刚刚说过,绝对路径是目标文件的绝对所在位置的路径。 那么针对上图所示的那样,lucy.jpg的绝对路径是c:\sites\img\lucy.jpg。 而相对于lucy.html文件,lucy.jpg文件就在跟lucy.html同一级的img文件夹里。 那么相对于lucy.html文件的图片相对路径是img/lucy.jpg。 所以: c:\sites\img\lucy.jpg 是绝对路径。 img/lucy.jpg 是相对路径,相对于lucy.html文件的路径。 需要注意的是,相对路径不止是一个。 也可以这么写:../sites/img/lucy.jpg这个也是一个写法。 意思是相当于上一级sites文件夹下img文件夹下的lucy.jpg。 就是往上翻了一级再向下递归。就是相对么。写法不同而已。 下面我再举一个例子。 如下: lujing 以相对路径的原理:相对于李四,刘备是李四哥哥的儿子。也是李四他妈大儿子的儿子。这两种说法都能表达准确的意思。 以绝对路径的原理:刘备就是在中国身份证号为201021121503250012的人。 如果去了美国,美国当地部门没法查出201021121503250012是谁。这个可以比喻为,本地的数据使用了绝对路径,放到别的地方就出问题的情况。 所以相对路径就是相对于某个文件的路径。 绝对路径是不是相对路径的路径。
相对路径的写法:
“../”表示上一级目录开始(用在路径开头位置) “./”表示当前同级目录开始 (用在路径开头位置) “/”表示根目录开始(可用在路径任何位置,比如sites/img/lucy.jpg)