<img>

概述


HTML Image 元素( <img> )代表文档中的一个图像。

使用说明:
浏览器并不总是显示该元素中的图像。对于非图形浏览器(包括那些有视力障碍的人所使用的)来说就是这种情况,如果用户选择不显示图像,或者如果浏览器无法显示图像,因为它是无效的或 不支持的类型。在这些情况下,浏览器会用该元素的 alt 属性定义的文本来替换图像。

  • 内容类别流式内容段落内容,嵌入式内容,可触摸内容。如果元素有 usemap 属性,它也是交互内容的一部分。
  • 允许的内容None,它是一个 空元素.
  • 标签省略必须有一个开始标签,不允许有结束标签.
  • 允许的父元素接受嵌入式内容的任意元素.
  • DOM 接口HTMLImageElement

 属性

这个元素包括 全局 属性

title   hover时显示文本 

align 已废弃 HTML4.01, 已废弃 HTML5 使用 vertical-align CSS 属性
图像相对于它周围上下文的对齐。
alt
这个属性定义了描述图像的替换文本。用户将看到这个显示,如果图像的URL是错误的,该图像不在 支持的格式 列表中,或者如果图像还没有被下载。

使用说明: 省略这个属性表明该图像是内容的关键部分,但没有等效的文本可用。把这个属性设置为空字符串,表明该图像不是内容的关键部分,非可视化浏览器在渲染的时候可能会忽略它。

border 已废弃 HTML4.01, 已废弃 HTML5
图像周围的边框宽度。
crossorigin HTML5
这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取。启用CORS的图像 在 <canvas> 元素中可以重复使用而不会被污染。允许的值有:
anonymous
执行一个跨域的请求(比如,有 Origin: HTTP header)。但是没有发送证书(比如,没有 cookie,没有 X.509 证书,没有 HTTP 基本的授权认证)。如果服务器没有给源站证书(没有设置 Access-Control-Allow-Origin: HTTP头),图像会被污染而且它的使用会被限制。
use-credentials
一个有证书的跨域请求(比如,有 Origin: HTTP header)被发送 (比如,a cookie, a certificate, and HTTP Basic authentication is performed)。如果服务器没有给源站发送证书(通过 Access-Control-Allow-Credentials: HTTP header),图像将会被污染,且它的使用会受限制。
当用户并未显式使用本属性时,默认不使用 CORS 发起请求(例如,不会向服务器发送 HTTP 头部信息),用以防止其在<canvas>中的使用。如果无效,默认当做anonymous关键字生效。更多信息,请查看 CORS 属性设置 。
height
图像的高度,在 HTML5 中的单位是 CSS 像素,在 HTML 4 中可以是像素也可以是百分比。width/height只指定一个值,则另一个会根据原始图像进行赋值
width
图像的宽度,在 HTML5 中单位是 CSS 像素, 在 HTML 4 中可以是像素也可以是百分比。
hspace 已废弃 HTML4.01, 已废弃 HTML5
插入到图像的左侧和右侧的空白像素的值。
ismap
这个布尔属性表示图像是否是服务器端map的一部分。如果是, 那么点击的精准坐标将会被发送到服务器。

使用说明:只有在<img> 元素是一个拥有有效 href 属性的 <a> 元素的后代元素的情况下,这个属性才会被允许使用。

longdescHTML 4 only
URL 描述要显示图像的URL描述,是对 alt 文本的补充。
name 已废弃 HTML4.01, 已废弃 HTML5
元素的名字。在 HTML 4 只向后兼容。 使用 id 属性替代。
sizesHTML5
表示资源大小的以逗号隔开的一个或多个字符串。每一个资源大小包括:
  1. 一个媒体条件。最后一项一定是被忽略的。
  2. 一个资源尺寸的值。

资源尺寸的值被用来指定图像的预期尺寸。当srcset使用 'w' 描述符时,用户代理使用当前图像大小来选择srcset中合适的一个图像URL。 被选中的尺寸影响图像的显示大小(如果没有CSS样式被应用的话)。如果没有设置srcset属性,或者没值,那么sizes属性也将不起作用。

src
图像的 URL,这个属性对 <img> 元素来说是必需的。在支持 srcset 的浏览器中,src 被当做拥有一个像素密度的描述符 1x 的候选图像处理,除非一个图像拥有这个像素密度描述符已经被在 srcset 或者 srcset 包含 'w' 描述符中定义了.
srcsetHTML5
以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成:
  1. 一个图像的 URL。
  2. 可选的,空格后跟以下的其一:
    • 一个宽度描述符,这是一个正整数,后面紧跟 'w' 符号。该整数宽度除以sizes属性给出的资源(source)大小来计算得到有效的像素密度,即换算成和x描述符等价的值。
    • 一个像素密度描述符,这是一个正浮点数,后面紧跟 'x' 符号。

如果没有指定源描述符,那它会被指定为默认的 1x。

在相同的 srcset 属性中混合使用宽度描述符和像素密度描述符时,会导致该值无效。重复的描述符(比如,两个源 在相同的srcset两个源都是 '2x')也是无效的。

浏览器选择在给出的时间点显示大部分 adequate 图片。

usemap
与元素相关联的的 image map 的部分 URL(以 '#' 开始的部分)。

使用说明: 如果 <img> 元素是 <a> 或 <button> 元素的后代元素则不能使用这个属性。

vspace 已废弃 HTML4.01, 已废弃 HTML5
插入到图像的上方和下方的空白像素的数组。

支持的图像格式

HTML 标准并没有给出必须支持的图像格式的列表,因此每个用户代理支持一组不同的格式。 Gecko 支持:

说明:
对 XBM 格式的支持已经在 Gecko 的 1.9.2 版本中被移除了。

与 CSS 的交互

关于 CSS,<img> 是一个 替换元素。它没有基线,这意味着当在一个行内格式的上下文中使用 vertical-align: baseline 时,图像的底部将会与容器的基线对齐。

根据它的类型,图像可能会有一个本征维数(intrinsic dimension),但这不是一个必要条件:SVG图像就没有,而光栅图像有。

例 1

<img src="mdn-logo-sm.png" alt="MDN">

MDN

例 2:图像链接 

<a href="https://developer.mozilla.org/"><img src="mdn-logo-sm.png" alt="MDN"></a>

MDN

例 3:使用 srcset 属性

在支持 srcset 的用户代理中,src 属性是 1x 候选项。

 <img src="mdn-logo-sm.png" 
      alt="MDN" 
      srcset="mdn-logo-HD.png 2x">

例 4:使用 srcset 和 sizes 属性

在支持 srcset 的用户代理中,当使用 'w' 描述符时,src 属性会被忽略。当匹配了媒体条件 (min-width: 600px) 时,图像将宽 200px,否则宽 50vw(视图宽度的50%)。

<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">

规范

规范 状态 说明
HTML Living Standard
<img>
Living Standard
HTML5
<img>
Recommendation
HTML 4.01 Specification
<img>
Recommendation

浏览器的兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
imgChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
align
Deprecated
Chrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
altChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
border
Deprecated
Chrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
crossoriginChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
decodingChrome Full support YesEdge ? Firefox Full support 63IE No support NoOpera Full support YesSafari No support NoWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 63Opera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
heightChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
hspace
Deprecated
Chrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
intrinsicsize
ExperimentalNon-standard
Chrome Full support 71
Disabled
Full support 71
Disabled
Disabled From version 71: this feature is behind the #enable-experimental-productivity-features preference. To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox ? IE No support NoOpera Full support 58Safari No support NoWebView Android Full support 71
Disabled
Full support 71
Disabled
Disabled From version 71: this feature is behind the #enable-experimental-productivity-features preference.
Chrome Android Full support 71
Disabled
Full support 71
Disabled
Disabled From version 71: this feature is behind the #enable-experimental-productivity-features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android ? Opera Android Full support 50Safari iOS No support NoSamsung Internet Android Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the #enable-experimental-productivity-features preference.
ismapChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
longdescChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
name
Deprecated
Chrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
onerror
Deprecated
Chrome Full support YesEdge ? Firefox Full support 51IE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 51Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
referrerpolicyChrome Full support 51Edge No support NoFirefox Full support 50IE No support NoOpera Full support 38Safari Full support 11.1WebView Android Full support 51Chrome Android Full support 51Firefox Android Full support 50Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 7.2
sizesChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
srcChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
srcsetChrome Full support 34Edge Full support YesFirefox Full support 38
Full support 38
No support 32 — 52
Disabled
Disabled From version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 21Safari Full support 8WebView Android Full support 37Chrome Android Full support 34Firefox Android Full support 38
Full support 38
No support 32 — 52
Disabled
Disabled From version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 21Safari iOS Full support 8Samsung Internet Android Full support Yes
usemapChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
vspace
Deprecated
Chrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
widthChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
User must explicitly enable this feature.
User must explicitly enable this feature.

另见