?
このドキュメントでは、 php中國語ネットマニュアル リリース
HTML 元素表示文檔中的圖像<img> 。
內(nèi)容類別 | 流內(nèi)容，短語內(nèi)容，嵌入內(nèi)容，可觸及的內(nèi)容。如果元素具有usemap屬性，它也是交互式內(nèi)容類別的一部分。 |
|---|---|
允許的內(nèi)容 | 沒有，這是一個(gè)空的元素。 |
標(biāo)記遺漏 | 必須有開始標(biāo)簽，并且不得有結(jié)束標(biāo)簽。 |
允許 parents | 任何接受嵌入內(nèi)容的元素。 |
允許ARIA角色 | 任何 |
DOM界面 | HTMLImageElement |
屬性
該元素包含全局屬性。
自HTML4.01以來不推薦使用align，自HTML5以來已過時(shí)圖像與其周圍環(huán)境對(duì)齊。在HTML5中，改為使用float和/或vertical-alignCSS屬性。alt屬性定義描述圖像的替代文字。如果圖像URL錯(cuò)誤，圖像未使用支持的格式，或者圖像尚未下載，用戶將看到此文本。
瀏覽器并不總是顯示元素引用的圖像。非圖形瀏覽器（包括視力障礙者使用的瀏覽器），用戶選擇不顯示圖像，或?yàn)g覽器由于無效或不支持類型而無法顯示圖像的情況就是這種情況。在這些情況下，瀏覽器可能會(huì)用此元素alt屬性中定義的文本替換圖像。出于這些原因和其他原因，您應(yīng)該盡可能為alt提供有用的價(jià)值。
完全忽略屬性表明圖像是內(nèi)容的關(guān)鍵部分，并且沒有可用的文本等效內(nèi)容。將此屬性設(shè)置為空字符串（alt="")表示此圖像不是內(nèi)容的關(guān)鍵部分，非視覺瀏覽器可能會(huì)忽略它。
已過時(shí)圖像周圍邊框的寬度border自HTML4.01起棄用。在HTML5中，改用borderCSS屬性。HTML5枚舉屬性指示是否必須使用CORS來獲取相關(guān)圖像。啟用CORS的圖像可以在元素中重用，而不會(huì)被“污染”。允許的值為：執(zhí)行跨源請(qǐng)求（即，使用HTTP標(biāo)頭）。但是沒有發(fā)送證書（即沒有cookie，沒有X.509證書，也沒有發(fā)送HTTP基本認(rèn)證）。如果服務(wù)器未向原始站點(diǎn)提供憑據(jù)（通過未設(shè)置HTTP標(biāo)頭），則圖像將受到污染并且其使用受到限制。crossorigin<canvas>anonymousOrigin:Access-Control-Allow-Origin:use-credentialsOrigin:使用憑證執(zhí)行跨源請(qǐng)求（即使用HTTP標(biāo)頭），即發(fā)送cookie（即，證書和HTTP基本身份驗(yàn)證）。如果服務(wù)器沒有為原始站點(diǎn)提供憑據(jù)（通過Access-Control-Allow-Credentials:HTTP標(biāo)頭），則圖像將受到污染并且其使用受到限制。如果不存在，則在沒有CORS請(qǐng)求（即不發(fā)送Origin:HTTP標(biāo)頭）的情況下獲取資源，從而防止其<canvas>元素中的未受污染的使用。如果無效，則將其處理為使用枚舉關(guān)鍵字匿名。有關(guān)更多信息，請(qǐng)參閱CORS設(shè)置屬性。height圖像的固有高度（以像素為單位）。在HTML 4中，高度可以是像素或百分比。在HTML5中但是，該值必須以像素為單位。hspace自HTML4.01以來不推薦使用，自HTML5以來已過時(shí)插入圖像左側(cè)和右側(cè)的空白像素?cái)?shù)。在HTML5中，改用marginCSS屬性。ismap該布爾屬性表示圖像是服務(wù)器端地圖的一部分。如果是這樣，點(diǎn)擊的精確坐標(biāo)被發(fā)送到服務(wù)器。
只有當(dāng)<img>元素是有有效href屬性的<a>元素的后具代時(shí)，才允許該屬性。
longdesc指向圖像更詳細(xì)描述的鏈接。可能的值是一個(gè)URL或元素ID。已過時(shí)元素的名稱name自HTML4.01起棄用。為了向后兼容，它僅在HTML 4中受支持。改用該id屬性。referrerpolicy一個(gè)字符串，指示在獲取資源時(shí)使用哪個(gè)引用者：
no-referrer:Referer首標(biāo)將不被發(fā)送。no-referrer-when-downgrade:沒有Referer導(dǎo)航到的原點(diǎn)不使用TLS（HTTPS）當(dāng)報(bào)頭將被發(fā)送。如果沒有指定策略，這是用戶代理的默認(rèn)行為。origin:Referer頭將包括原產(chǎn)地的計(jì)劃頁面，主機(jī)和端口。origin-when-cross-origin:導(dǎo)航到其他來源將限制包含的推薦數(shù)據(jù)到方案，主機(jī)和端口，而從同一來源導(dǎo)航將包括推薦人的完整路徑。unsafe-url:Referer報(bào)頭將包括原點(diǎn)和路徑，而不是片段，密碼或用戶名。這種情況是不安全的，因?yàn)樗梢詫碜訲LS保護(hù)資源的起源和路徑泄漏到不安全的起源。
sizesHTML5以逗號(hào)分隔的一個(gè)或多個(gè)字符串的列表，指示一組源大小。每個(gè)源大小包括：
媒體條件。最后一項(xiàng)必須省略。
源大小值。
源大小值指定圖像的預(yù)期顯示大小。srcset當(dāng)使用寬度（' w'）描述符描述這些源時(shí)，用戶代理使用當(dāng)前源大小選擇屬性提供的源之一。所選的源大小會(huì)影響圖像的固有大?。ㄈ绻磻?yīng)用CSS樣式，則圖像的顯示大小）。如果該srcset屬性不存在，或者不包含帶有width（w）描述符的值，則該sizes屬性不起作用。
src圖片網(wǎng)址。屬性對(duì)于<img>元素是強(qiáng)制性的。在支持的瀏覽器上srcset，src被視為具有像素密度描述符的候選圖像，1x除非具有該像素密度描述符的圖像已被定義srcset,或者除非srcset包含w描述符。srcset在HTML5以逗號(hào)分隔的一個(gè)或多個(gè)字符串的列表，指示用戶代理可以使用的一組可能的圖像源。每個(gè)字符串由以下組成：
一個(gè)圖像的URL，
可選地，空格后跟以下之一：
寬度描述符或直接跟著“
w' 的正整數(shù)。寬度描述符除以sizes屬性中給出的源大小來計(jì)算有效像素密度。一個(gè)像素密度描述符，它是一個(gè)直接跟著'
x' 的正浮點(diǎn)數(shù)。
如果沒有指定描述符，則為源分配默認(rèn)描述符：1x。
在同一個(gè)srcset屬性中混合寬度描述符和像素密度描述符是不正確的。重復(fù)的描述符（例如，兩個(gè)相同的描述符srcset都用' 2x' 描述）也是無效的。
用戶代理可以自行選擇任何一個(gè)可用的來源。這為他們提供了很大的余地，可以根據(jù)用戶的喜好或帶寬條件來定制他們的選擇。
width圖像的固有寬度（以像素為單位）。在HTML 4中，百分比或像素是可接受的值。但在HTML5中，只有像素是可以接受的。usemap與元素關(guān)聯(lián)的圖像映射的部分網(wǎng)址（以'＃'開頭）。
使用注意：如果你不能使用這個(gè)屬性<img>元素的后代<a>或<button>元素。
已過時(shí)插入圖像上方和下方的空白像素?cái)?shù)vspace自HTML4.01起棄用，在HTML5中，改用marginCSS屬性。
支持的圖像格式
HTML標(biāo)準(zhǔn)沒有提供必須支持的圖像格式列表，因此每個(gè)用戶代理都支持一組不同的格式。Gecko支持：
JPEG
GIF, 包含動(dòng)態(tài)GIF
PNG
APNG
SVG
BMP
BMP ICO
PNG ICO
與CSS的互動(dòng)
關(guān)于CSS，<img>是一個(gè)被替代的元素。它沒有基線，因此當(dāng)圖像在內(nèi)聯(lián)格式化上下文中使用vertical-align: baseline時(shí)圖像的底部將放置在容器的基線上。
根據(jù)其類型，圖像可能具有固有的寬度和高度。但對(duì)于某些圖像類型，內(nèi)在尺寸不是必需的。例如，SVG圖像沒有固有的尺寸。
錯(cuò)誤
如果嘗試加載或渲染圖像時(shí)發(fā)生錯(cuò)誤，并且onerror事件處理程序已配置為處理error事件，則事件處理程序?qū)⒈徽{(diào)用。這可能發(fā)生在許多情況下，包括：
src屬性為空或null。指定的
srcURL與用戶當(dāng)前所在頁面的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屬性
在使用' '描述符時(shí)src支持的用戶代理中忽略該屬性。當(dāng)媒體條件匹配時(shí)，圖像寬度為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) | 評(píng)論 |
|---|---|---|
引用者策略該規(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 | ? |