首先我們來看看img標簽的定義：

圖片也是網頁中最常見的html元素，而且是相當重要的一部分。在html網頁中，圖像由 img 標簽定義， img 是空html標簽或說是單標簽，它只包含屬性，沒有閉合標簽。

img標簽的src屬性的定義：

img 標簽的 src 屬性是必需的。它的值是圖像文件的 URL，也就是引用該圖像的文件的的絕對路徑或相對路徑。

提示：為了整理文檔的存儲，創作者通常會把圖像文件存放在一個單獨的文件夾中，而且通常會將這些目錄命名為 pics 或者 images 之類的名稱。在 W3School 在線教程中，我們的工程師把大部分常用的圖像都存放到一個名為 i 的文件夾中， i 是 images 的縮寫，這樣做的好處是可以最大程度地簡化路徑。

src屬性是引入圖片的地址，沒有它 img 標簽就沒意義了。

HTML img標簽的src屬性的格式：

 img src= 圖片地址 alt= 圖片描述 

說明：圖片地址：儲圖像的位置；圖片描述：對圖片意思的說明，如果圖片不能顯示，則顯示該說明。

HTML img標簽的src屬性的使用說明：

直接給src屬性一個服務器端資源的地址，img控件會自動獲取并解析資源。

圖片和HTML文本在同一目錄下：例如index.html和img.jpg

寫法： img src= img.jpg

圖片和HTML不在同一目錄下：有分兩種情況：

1.圖片img.jpg在文件夾images中，index.html和images文件夾在同一個目錄下

寫法： img src= images/img.jpg

2.圖片img.jpg在文件夾images中，index.html在controller文件夾中，images和controller文件夾在同一個目錄下

寫法： img src= ../images/img.jpg

如果源是來自網上的 那就必須要用絕對路徑

寫法： img src= http://www.survivalescaperooms.com/pic/img.jpg

如果沒有圖片時，瀏覽器將顯示alt中的文字代替。

 img src= lib/img/imgDef.png alt= 暫無圖片 / 

img中的src屬性的圖片路徑的使用方式:

1.html文件跟*.jpg文件(f盤)在不同目錄下：

 img src= file:///f:/*jpg width= 300 height= 120 / 

2.html文件跟*.jpg圖片在相同目錄下：

 img src= .jpg width= 300 height= 120 / 

3.html文件跟*.jpg圖片在不同目錄下：

a.圖片*.jpg在image文件夾中，*html跟image在同一目錄下：

 img src= image/*jpg/ width= 300 height= 120 / 

b.圖片*jpg在image文件夾中，*html在connage文件夾中，image跟connage在同一目錄下：

 img src= ../image/*jpg/ width= 300 height= 120 / 

4.如果圖片來源于網絡，那么寫絕對路徑：

 img src= http://image.VeVb.com/pcindexhot /width= 300 height= 120 / 

HTML img標簽的src屬性的屬性：

【小編推薦】

html表格中的th表頭內容怎么居中？th表頭標簽align屬性的具體介紹

html P標簽為什么不能嵌套div？還有關于html P標簽的css樣式的實例介紹

以上就是HTML img標簽的src屬性的用法是什么？具體使用方法解析（內附實例）的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。