在HTML(假设当前在index.html)的 img 标签中,想要访问一个工程中的图片,需要在HTML文件中指定图片的所在地址,此时需要通过 URL地址来访问
URL地址分为两种:
(1)相对URL:
可以通过两种相对URL方式访问一个图片资源,这两种方式的区别是:一个是从index.html这个文件所在的目录下寻找,一个是从服务器的根目录下寻找。
如下图:
①:从当前目录下寻找:
与index.jsp同级的就是img这个文件夹,而图片在img中所以先找到 img 文件夹,在找到img1.png即可
故为:img/img1.png
②:从服务器根目录下寻找:
在地址的最开头加上一个 / ,代表从服务器根目录(相当于这里的web文件夹)下检测,而img是web文件夹下的子目录,故为:
/img/img1.png
补充:需要回退目录的情况
“ ../ ” 可以相对于当前目录回退一个目录, 例如:
现在 index.jsp 在img文件夹中,需要链接到 img 上一级的web目录下的 indexCSS.css
所以需要回退一级目录,然后直接选择即可,所以相对URL地址为:
../indexCSS.css
以上这种是相对于当前目录的相对URL,如果使用相对于服务器根目录的相对URL的话就不需要回退目录了,即:
/indexCSS.css
这里IDEA把这种从根目录开始找的方式称为 绝对路径,其实这个也算是相对URL里面的绝对路径了,毕竟不管文件在哪里都是从根目录开始找的,这里IDEA提示我们:在JSP中不推荐使用绝对地址(第二种相对URL地址)
绝对地址:
绝对地址就是资源文件在我们服务器中真正的存储位置
一个IP地址或者域名代表一个主机,然后在主机后面加上具体的文件路径就构成了绝对地址:
具体看这个例子:
首先看主页 index.jsp (原谅我无处安放的图片和简陋的界面), 红色圈划住的就是绝对地址
localhost:8080(服务器主机) + 服务器根目录 + 进一步的路径 = 绝对地址
接下来直接访问那个图片了:
只需要在上面主页的基础上加上进一步的路径,也就是 根目录/img/img1.png 就可以访问到这张高清大图了,如图: