?
This document uses PHP Chinese website manual Release
HTML 元素表示文檔中的圖像<img> 。
內(nèi)容類別 | 流內(nèi)容，短語內(nèi)容，嵌入內(nèi)容，可觸及的內(nèi)容。如果元素具有usemap屬性，它也是交互式內(nèi)容類別的一部分。 |
|---|---|
允許的內(nèi)容 | 沒有，這是一個空的元素。 |
標記遺漏 | 必須有開始標簽，并且不得有結(jié)束標簽。 |
允許 parents | 任何接受嵌入內(nèi)容的元素。 |
允許ARIA角色 | 任何 |
DOM界面 | HTMLImageElement |
屬性
該元素包含全局屬性。
自HTML4.01以來不推薦使用align，自HTML5以來已過時圖像與其周圍環(huán)境對齊。在HTML5中，改為使用float和/或vertical-alignCSS屬性。alt屬性定義描述圖像的替代文字。如果圖像URL錯誤，圖像未使用支持的格式，或者圖像尚未下載，用戶將看到此文本。
瀏覽器并不總是顯示元素引用的圖像。非圖形瀏覽器（包括視力障礙者使用的瀏覽器），用戶選擇不顯示圖像，或瀏覽器由于無效或不支持類型而無法顯示圖像的情況就是這種情況。在這些情況下，瀏覽器可能會用此元素alt屬性中定義的文本替換圖像。出于這些原因和其他原因，您應(yīng)該盡可能為alt提供有用的價值。
完全忽略屬性表明圖像是內(nèi)容的關(guān)鍵部分，并且沒有可用的文本等效內(nèi)容。將此屬性設(shè)置為空字符串（alt="")表示此圖像不是內(nèi)容的關(guān)鍵部分，非視覺瀏覽器可能會忽略它。
已過時圖像周圍邊框的寬度border自HTML4.01起棄用。在HTML5中，改用borderCSS屬性。HTML5枚舉屬性指示是否必須使用CORS來獲取相關(guān)圖像。啟用CORS的圖像可以在元素中重用，而不會被“污染”。允許的值為：執(zhí)行跨源請求（即，使用HTTP標頭）。但是沒有發(fā)送證書（即沒有cookie，沒有X.509證書，也沒有發(fā)送HTTP基本認證）。如果服務(wù)器未向原始站點提供憑據(jù)（通過未設(shè)置HTTP標頭），則圖像將受到污染并且其使用受到限制。crossorigin<canvas>anonymousOrigin:Access-Control-Allow-Origin:use-credentialsOrigin:使用憑證執(zhí)行跨源請求（即使用HTTP標頭），即發(fā)送cookie（即，證書和HTTP基本身份驗證）。如果服務(wù)器沒有為原始站點提供憑據(jù)（通過Access-Control-Allow-Credentials:HTTP標頭），則圖像將受到污染并且其使用受到限制。如果不存在，則在沒有CORS請求（即不發(fā)送Origin:HTTP標頭）的情況下獲取資源，從而防止其<canvas>元素中的未受污染的使用。如果無效，則將其處理為使用枚舉關(guān)鍵字匿名。有關(guān)更多信息，請參閱CORS設(shè)置屬性。height圖像的固有高度（以像素為單位）。在HTML 4中，高度可以是像素或百分比。在HTML5中但是，該值必須以像素為單位。hspace自HTML4.01以來不推薦使用，自HTML5以來已過時插入圖像左側(cè)和右側(cè)的空白像素數(shù)。在HTML5中，改用marginCSS屬性。ismap該布爾屬性表示圖像是服務(wù)器端地圖的一部分。如果是這樣，點擊的精確坐標被發(fā)送到服務(wù)器。
只有當<img>元素是有有效href屬性的<a>元素的后具代時，才允許該屬性。
longdesc指向圖像更詳細描述的鏈接。可能的值是一個URL或元素ID。已過時元素的名稱name自HTML4.01起棄用。為了向后兼容，它僅在HTML 4中受支持。改用該id屬性。referrerpolicy一個字符串，指示在獲取資源時使用哪個引用者：
no-referrer:Referer首標將不被發(fā)送。no-referrer-when-downgrade:沒有Referer導(dǎo)航到的原點不使用TLS（HTTPS）當報頭將被發(fā)送。如果沒有指定策略，這是用戶代理的默認行為。origin:Referer頭將包括原產(chǎn)地的計劃頁面，主機和端口。origin-when-cross-origin:導(dǎo)航到其他來源將限制包含的推薦數(shù)據(jù)到方案，主機和端口，而從同一來源導(dǎo)航將包括推薦人的完整路徑。unsafe-url:Referer報頭將包括原點和路徑，而不是片段，密碼或用戶名。這種情況是不安全的，因為它可以將來自TLS保護資源的起源和路徑泄漏到不安全的起源。
sizesHTML5以逗號分隔的一個或多個字符串的列表，指示一組源大小。每個源大小包括：
媒體條件。最后一項必須省略。
源大小值。
源大小值指定圖像的預(yù)期顯示大小。srcset當使用寬度（' w'）描述符描述這些源時，用戶代理使用當前源大小選擇屬性提供的源之一。所選的源大小會影響圖像的固有大小（如果未應(yīng)用CSS樣式，則圖像的顯示大?。Ｈ绻?code>srcset屬性不存在，或者不包含帶有width（w）描述符的值，則該sizes屬性不起作用。
src圖片網(wǎng)址。屬性對于<img>元素是強制性的。在支持的瀏覽器上srcset，src被視為具有像素密度描述符的候選圖像，1x除非具有該像素密度描述符的圖像已被定義srcset,或者除非srcset包含w描述符。srcset在HTML5以逗號分隔的一個或多個字符串的列表，指示用戶代理可以使用的一組可能的圖像源。每個字符串由以下組成：
一個圖像的URL，
可選地，空格后跟以下之一：
寬度描述符或直接跟著“
w' 的正整數(shù)。寬度描述符除以sizes屬性中給出的源大小來計算有效像素密度。一個像素密度描述符，它是一個直接跟著'
x' 的正浮點數(shù)。
如果沒有指定描述符，則為源分配默認描述符：1x。
在同一個srcset屬性中混合寬度描述符和像素密度描述符是不正確的。重復(fù)的描述符（例如，兩個相同的描述符srcset都用' 2x' 描述）也是無效的。
用戶代理可以自行選擇任何一個可用的來源。這為他們提供了很大的余地，可以根據(jù)用戶的喜好或帶寬條件來定制他們的選擇。
width圖像的固有寬度（以像素為單位）。在HTML 4中，百分比或像素是可接受的值。但在HTML5中，只有像素是可以接受的。usemap與元素關(guān)聯(lián)的圖像映射的部分網(wǎng)址（以'＃'開頭）。
使用注意：如果你不能使用這個屬性<img>元素的后代<a>或<button>元素。
已過時插入圖像上方和下方的空白像素數(shù)vspace自HTML4.01起棄用，在HTML5中，改用marginCSS屬性。
支持的圖像格式
HTML標準沒有提供必須支持的圖像格式列表，因此每個用戶代理都支持一組不同的格式。Gecko支持：
JPEG
GIF, 包含動態(tài)GIF
PNG
APNG
SVG
BMP
BMP ICO
PNG ICO
與CSS的互動
關(guān)于CSS，<img>是一個被替代的元素。它沒有基線，因此當圖像在內(nèi)聯(lián)格式化上下文中使用vertical-align: baseline時圖像的底部將放置在容器的基線上。
根據(jù)其類型，圖像可能具有固有的寬度和高度。但對于某些圖像類型，內(nèi)在尺寸不是必需的。例如，SVG圖像沒有固有的尺寸。
錯誤
如果嘗試加載或渲染圖像時發(fā)生錯誤，并且onerror事件處理程序已配置為處理error事件，則事件處理程序?qū)⒈徽{(diào)用。這可能發(fā)生在許多情況下，包括：
src屬性為空或null。指定的
srcURL與用戶當前所在頁面的URL相同。指定的圖像以某種方式損壞，導(dǎo)致其無法加載。
指定圖像的元數(shù)據(jù)被損壞，以至于無法檢索其維度，并且
<img>元素的屬性中未指定維度。指定的圖像格式不受用戶代理支持。
示例1：替代文字
<img src="mdn-logo-sm.png" alt="MDN">
示例2：圖像鏈接
<a href="/">MDN<img src="mdn-logo-sm.png" alt="MDN"></a>
示例3：使用srcset屬性
src屬性是1x支持的用戶代理中的候選者srcset。
<img src="mdn-logo-sm.png" alt="MDN" srcset="mdn-logo-HD.png 2x">
示例4：使用srcset和sizes屬性
在使用' '描述符時src支持的用戶代理中忽略該屬性。當媒體條件匹配時，圖像寬度為200px，否則寬度為50vw（視口寬度的50％）。srcsetw(min-width: 600px)
<img src="clock-demo-thumb-200.png" alt="Clock" srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w" sizes="(min-width: 600px) 200px, 50vw">
規(guī)格
規(guī)范 | 狀態(tài) | 評論 |
|---|---|---|
引用者策略該規(guī)范中“引用者屬性”的定義。 | 編輯草稿 | 增加了referrerpolicy屬性。 |
HTML Living Standard該規(guī)范中'<img>'的定義。 | 生活水平 | |
HTML5該規(guī)范中'<img>'的定義。 | 建議 | |
HTML 4.01規(guī)范該規(guī)范中'<img>'的定義。 | 建議 |
瀏覽器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
Basic support | (Yes) | 20 or earlier (12) | (Yes) | (Yes) | (Yes) | (Yes) |
srcset | 34.0 | (Yes) | 32.0 (32.0)2 | No support | 21 | 7.1 |
referrerpolicy | 46.01 | No support | 50.0 (50.0) | ? | ? | ? |
onerror event handler | (Yes) | ? | 51 (51) | ? | (Yes) | (Yes) |
caseless usemap attribute | 58 | ? | ? | ? | 45 | ? |
Feature | Android Webview | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | 20 or earlier (12) | (Yes) | (Yes) | (Yes) | (Yes) |
srcset | 34.0 | 34.0 | (Yes) | No support | No support | 21 | iOS 8 |
referrerpolicy | 46.0 1 | 46.0 1 | No support | 50.0 (50.0) | ? | ? | ? |
onerror event handler | (Yes) | (Yes) | ? | 51.0 (51) | ? | ? | (Yes) |
caseless usemap attribute | 58 | 58 | ? | ? | ? | 45 | ? |