相對路徑和絕對路徑，往往都是初學者最困惑的知識點之一。在這一節，我們詳細跟大家探討一下這兩者的區別和寫法。
我們在C盤目錄下建立一個網站，網站名稱為“BookTest”，這個網站下的目錄內容如下：
我們先溫習上一節學到的<img>標簽的語法：
<img src="圖像源文件路徑" alt="圖片無法顯示時的提示文字" title="鼠標經過圖片時的提示文字"/>
在img標簽中，要想正確在浏覽器顯示圖像，我們必須給出圖像的准確路徑，即<img>標簽的src屬性。在接下來，我們用“網頁1”和“網頁2” 分別去引用images文件夾下的海賊王圖片，從而多方面來認識相對路徑和絕對路徑的區別。
如果在“網頁1”引用“海賊王”這張圖片，則圖片路徑有兩種寫法：
以上兩種方法都能達到效果。為什麼呢？這就是相對路徑和絕對路徑的問題。
寫法一采用了“相對路徑”方法，所謂的相對路徑，就是在同一個網站下，不同文件之間的的位置定位。我們分析一下，“網頁1”和images文件夾位於網站BookTest根目錄下，而海賊王圖片位於images文件夾下，那麼src應該是“images/海賊王.jpg”。
那有同學就會問，那下圖2中，“網頁1”如果要引用海賊王圖片的相對路徑怎麼寫呢？
答案應該是：<img src="海賊王.jpg" alt="海賊王"/>。這個時候網頁1與海賊王圖片位於同一目錄下。
對於寫法二，采用的是“絕對路徑”方法，所謂的絕對路徑就是完整的路徑。
我們再回到圖1中的目錄內容，如果在“網頁2”引用“海賊王”這張圖片，圖片路徑也有兩種寫法：
同樣，寫法一是相對路徑寫法，而寫法二是絕對路徑寫法。我們分析一下，“網頁2”位於test文件夾下，而海賊王圖片位於images文件夾下。因此，相對於“網頁2”，海賊王圖片位於“網頁2”上一級目錄下的images文件夾下。因此，src的寫法為“../images/海賊王.jpg” alt=”海賊王”。其中“../”表示上一級目錄，大家要懂得這種寫法。
現在就可以對相對路徑寫法進行總結了。相對路徑的寫法首先就是要分析當前網頁的位置和圖像的位置之間的關系，然後用一種方式把他們之間的相對關系表達出來。
寫法二是“絕對路徑”寫法，跟“網頁1”引用海賊王圖片的寫法一樣。絕對路徑，只要你的圖片沒有移動到別的地方，所有網頁引用該圖片的路徑寫法都是一樣的。大家稍微想一下就懂了。
在一個網頁引用圖片，最煩人的一點就是往往容易把路徑給寫錯，然後在浏覽器圖片沒辦法顯示出來。那有什麼簡單方法防止出錯呢？
在Visual Studio網頁中，如果要在頁面引用一張圖片，我們只需要采取一個小技巧就可以讓你的圖片路徑准確表達出來。
我們打開一個網頁，然後用鼠標拖拽著圖片到你網頁代碼處：
當圖片被拖拽到代碼處之後， Visual Studio自動生成<img>標簽代碼：
大家會驚奇地發現，系統自動生成了<img>標簽代碼，而且圖片的路徑src都自動生成了。這樣我們以後引用圖片都不需要自己手動寫圖片的src了。
系統自動生成的都是相對路徑，對於一個網站來說，外部文件或圖片的引用都是使用相對路徑，幾乎不用絕對路徑，大家要非常清楚這一點。
疑問1、為什麼我使用絕對路徑時，圖片不能顯示出來？
當我們使用絕對路徑時，往往編輯器都不能把圖片的路徑解析出來，因此圖片無法在網頁中顯示出來。在真正的網站開發中，對於圖片或者引用文件的路徑，我們100%都是使用相對路徑的。因此，大家不必糾結絕對路徑問題，只需要掌握相對路徑的寫法即可。
總結1、相對路徑和絕對路徑：
（1）相對路徑，就是在同一個網站下，不同文件之間的的位置定位。引用的文件是相對當前網頁的位置而言的，根據這個相對位置得出相對路徑。
（2）絕對路徑，指的是完整的路徑。
2、在visual studio中引用圖片，都是采用拖拽方式自動生成代碼；
3、對於一個網站而言，外部文件或圖片的引用都是使用相對路徑，幾乎不用絕對路徑。