1. 程式人生 > >關於html頁面img標籤中src屬性的理解

關於html頁面img標籤中src屬性的理解

今天在練習SSM框架時,接觸到了關於html頁面中圖片的引用,因為案例中採用的是作者自己的絕對路徑,雖然這種方法也沒問題,但採用相對路徑應該會更完美,也能加深自己對相對路徑的熟悉。於是百度了一下,得到如下總結,記錄之,方便後續檢視。

  • 圖片檔案和html檔案在同一路徑下

當圖片檔案和html檔案在同一路徑下時,可採用<img src="company1.jpg">,如下圖所示:

此時得到的結果如下:

另:使用<img src="./company1.jpg" /><img src="company1.jpg" />的效果都是一樣的,都指定到當前的檔案目錄下。

  • 圖片檔案在html檔案的上層目錄

當圖片檔案位於html檔案的上層目錄時,可採用<img src="../company2.jpg">,如下圖所示:

此時得到的結果如下:

另:上面的例子中,圖片檔案位於html檔案的的上一層目錄,使用../表示;如果位於更上層目錄則使用../../,具體使用幾個../,取決於目標檔案所在的檔案目錄。

  • 圖片檔案位於html檔案目錄以外的其他資料夾中

當圖片檔案位於html檔案目錄以外的其他路徑上時,可採用<img src="../02_圖片檔案/company3.jpg">,如下圖所示:

此時得到的結果如下:

相關推薦

no