一、首先我們要知道:
“./”:表示當前目錄(也叫工作目錄)
"../":表示級及目錄
"/":表示根目錄
二、網上的url
選中自己想要的圖片,右鍵“復制圖像地址”,然后粘貼在<img>標簽的src路徑下。
三、本地的絕對路徑
絕對路徑是相對於磁盤的位置去定位文件的地址,即圖片文件與html文件不在同一個地址下:
如果圖片的路徑在E:/A文件夾/B文件夾/C文件夾/1.jpg
html文件的路徑也在D:/F文件夾/G文件夾/new1.html
則需要在在<img>標簽的src路徑下填寫絕對路徑。
1、如果訪問本地的絕對路徑下的圖片,應該使用file協議,而不是http協議
則文件路徑可以這樣寫<img src="file:///E:/A文件夾/B文件夾/C文件夾/1.jpg" style="width: 500px;">
也可以直接只寫個根目錄標記“/”<img src="/E:/A文件夾/B文件夾/C文件夾/1.jpg" style="width: 500px;">
2、web服務器上的網絡資源地址定位是相對於網站根目錄的。
四、本地的相對路徑
絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件,相對路徑就沒有這個問題。
1、即在同一個地址下:
如果圖片的路徑在D:/A文件夾/B文件夾/1.jpg
html文件的路徑也在D:/A文件夾/B文件夾/new1.html
則直接在<img>標簽的src路徑下填寫1.jpg 代碼如下:
<img src="1.jpg" style="width: 500px;">
在同一個目錄下也可以用"./"表示,即代碼也可以這樣寫
<img src="./1.jpg" style="width: 500px;">
2、雖然不在同一個地址,但在其上級目錄,則可以用“../”表示
表示當前文件所在的目錄的上一級目錄。
如果圖片的路徑在D:/A文件夾/1.jpg,而html文件在
D:/A文件夾/B文件夾/1.jpg 則直接在<img>標簽的src路徑
為../1.jpg,即:<img src="../1.jpg" style="width: 500px;">
3、如在其父目錄的某一文件夾下,其文件夾為image,則
應這樣寫src的相對路徑<img src="../image/1.jpg" style="width: 500px;">
4、如圖片文件在其子目錄下,其文件夾同樣是image,則
應這樣寫src的相對路徑<img src="image/1.jpg" style="width: 500px;">