關於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，解決了咱們所說的項目移植等問題。