Html中相对路径和绝对路径 以及相对路径下照片不显示的解决

时间:2022-11-16 10:39:00

照片的路径分为绝对路径和相对路径

1.绝对路径分为两种,一种是网络的,一种是本地的
(1)http://www.baidu.com  前面有http://这是网络上的绝对路径,其实它的实际路径为:http://61.135.169.125:80 是服务器对于网络的绝对路径
 
http://61.135.169.125:80/image/1.jpg 就是访问了百度服务器下image文件夹的一个图片
 
file://E:/image/1.jpg
(2)意思就是以FILE读取模式打开本地绝对路径E盘下image文件夹的1.jpg文件
它是以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的,所以除非文件丢失,很少出现错误。

2.相对路径

根目录为参考点的路径描述方式称之为绝对路径
 
以图片为例分为三种情况
这里我们在WebContent下建立了文件夹“image”

页面文件html也在WebContent文件夹下

前提条件页面文件需和image在同个目录下,
(1)如果是子目录,例如image里面,就用image/01.gif 如例子所示
(2)如果是上一级目录就是../01.gif 

( 3 )同级的目录,例如image里面,../images/123.jpg
 

由于将文件放到image文件夹的方式不同就会产生错误

×将文件复制到我的电脑-eclipse工作地点下的image文件里直接覆盖,会产生照片不同步,eclipse里image文件夹会不显示新放入的照片,自然网页也不会显示×

√将文件复制或直接拖入正在运行的eclipse 所要放的image文件夹中,完成对image文件夹的重写,我们就可以看见image已经显示放入的新文件了√