关于url路径的定义方式

1、概述　　

　　不管是作网页，仍是WEB系统，咱们都会用到连接，图片，文件的地方，这些地方都涉及到路径的问题，例如：background-image:url();这一CSS样式，而url()的定义方式有两种，一种是绝对路径，一种是相对路径，咱们平时在写网页用到最多的是相对路径，这篇文章主要介绍的是绝对路径和相对路径在项目中的应用，这里有人会说相对路径更利于项目的移植和部署，那么咱们为何还要用到绝对路径呢？如下作简要介绍与分析：

2、什么是绝对路径：

　　 绝对路径是指文件在硬盘上真正存储的路径。好比咱们在D盘里的images文件夹下存了一张图片logo.png，那么这个图片的绝对路径就是D:\images\logo.png。因此咱们在使用绝对路径指向该图片的时候的语句应该为：

　　background-image:url("D:\images\logo.png");

　　在咱们实际编程中咱们不多会用到绝对路径，由于本地电脑上的图片的当前位置，极可能在传输到WEB服务器上发生改变，举个简单的例子，假如你得项目文件夹在本地C盘，此时你定义了一个背景图的路径，C:\demo\images\logo.png，此时你把项目总体移动到D盘此时该图片的真正路径为D:demo\images\logo.png，而根据原路径是找不到的。

　　

3、什么是相对路径：

　　相对路径是指，相对于本文件的目标文件的位置。相对路径能够避免在项目总体目录改变时，绝对路径找不到的问题。相对路径有如下几种状况：

　　(1)本文件与目标文件在同一根目录下，例如：demo.html与logo.png在同一目录下：

　　　　

　　　　这时指向logo的相对路径为：background-image:url(logo.png);

　　　　

　　(2)本文件与目标文件的上级目录在同一根目录下，例如demo与image在同一目录下，logo在image文件夹内：

　　　　　　

　　　　这时指向logo的相对路径为：background-image:url(image/logo.png);

　　(3)本文件的上级目录与目标文件的上级目录在同一根目录下，例如：demo.html在html文件夹下，logo在image下：

　　　　

　　　　这时指向logo的相对路径为：background-image:url(../image/logo.png);　这里的../是指向上一级目录，若是你的本文件在第2层目录下用../../去找，依次类推在n层就用n个../。　　

4、绝对路径与相对路径的优缺点及使用的地方

　　一、绝对路径的优势：

　　　　若是网页位置改变，里面的连接仍是指向正确的URL。

　　二、绝对路径的缺点：

   　　　在编码编写时不方便使用绝对路径，由于连接应该指向真正的域名而不是开发站点。

　　三、相对路径的优势：

    　　A、容易移动内容，能够整个目录移动。

    　　B、测试方法比较灵活，本机测试时比较方便。

　　四、相对路径的缺点：

  　　  A、部份内容页面换了位置时，连接容易失效。

    　　B、容易被人大面积采集抄袭。

　　结合实际状况，我在项目进行的过程当中，分别编写了两个提示页面，一个是无权限访问页，一个是未登陆或登陆超时页面，这两个页面的跳转地址不固定，尤为是无权限访问页，跳转地址变化很是大，网页内图片不能显示，这时就须要用到绝对路径了，可是为了项目的正常运行绝对路径不能写死（这里有的人叫作相对虚拟目录，其实就是绝对路径的原理），我用JS取值：

//获取项目路径
var contextPath = "${pageContext.request.contextPath}";

//　　将　　　项目路径   与 　　相对虚拟目录 　　拼接成绝对路径
var url = contextPath + "/images/logo.jpg";

//给元素URL赋值
$("元素").css("background-image","url(" + url + ")");

　　这样不管咱们项目部署在哪或者是访问地址如何改变，访问路径都能正确的指向咱们想要的url，解决了咱们所说的项目移植等问题。