总结
HTML <img> 标签元素（或者 HTML Dom 中的 Image 对象）代表文档中的一个图像。
使用说明：
浏览器并不总是显示该元素中的图像。对于非图形浏览器（包括那些有视力障碍的人所使用的）来说就是这种情况，如果用户选择不显示图像，或者如果浏览器无法显示图像，因为它是无效的或 不支持的类型。在这些情况下，浏览器会用该元素的 alt 属性定义的文本来替换图像。
- 内容类别流式内容，段落内容，嵌入式内容，可触摸内容。如果元素有 {{htmlattrxref("usemap", "img")}} 属性，它也是交互内容的一部分。
- 允许的内容None，它是一个 {{Glossary("空元素")}}.
- 标签省略必须有一个开始标签，不允许有结束标签.
- 允许的父元素接受嵌入式内容的任意元素.
- DOM 接口{{domxref("HTMLImageElement")}}
属性
这个元素包括 global 属性.
- {{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}} 使用 {{cssxref('vertical-align')}} CSS 属性
- 图像相对于它周围上下文的对齐。
- {{htmlattrdef("alt")}}
- 这个属性定义了描述图像的替换文本。用户将看到这个显示，如果图像的URL是错误的，该图像不在 支持的格式 列表中，或者如果还没有下载图像。
使用说明： 省略这个属性表明该图像是内容的关键部分，但没有文本等效可用。将这个属性设置为空字符串表明该图像不是内容的关键部分，非可视化浏览器在渲染的时候可能会忽略该图像。
- {{htmlattrdef("border")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}
- 图像周围的边框宽度。
- {{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}
- 这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取。启用CORS的图像 在 {{HTMLElement("canvas")}} 元素中可以重复使用而不会被污染。允许的值有：
- anonymous
- A cross-origin request (i.e., with
Origin:HTTP header) is performed. But no credential is sent (i.e., no cookie, no X.509 certificate, and no HTTP Basic authentication is sent). If the server does not give credentials to the origin site (by not setting theAccess-Control-Allow-Origin:HTTP header), the image will be tainted and its usage restricted. - use-credentials
- A cross-origin request (i.e., with
Origin:HTTP header) performed with credential is sent (i.e., a cookie, a certificate, and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (throughAccess-Control-Allow-Credentials:HTTP header), the image will be tainted and its usage restricted.
Origin:HTTP header), preventing its non-tainted usage in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information. - {{htmlattrdef("height")}}
- 图像的高度，在 {{HTMLVersionInline(5)}} 中的单位是 CSS 像素，在 {{HTMLVersionInline(4)}} 中可以是像素也可以是百分比。
- {{htmlattrdef("hspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}
- 插入到图像的左侧和右侧的空白像素的值。
- {{htmlattrdef("ismap")}}
- 这个布尔属性表示图像是否是服务器端map的一部分。如果是， 那么点击的精准坐标将会被发送到服务器。
Usage note: This attribute is allowed only if the
<img>element is a descendant of an {{htmlelement("a")}} element with a valid {{htmlattrxref("href","a")}} attribute. - {{htmlattrdef("longdesc")}}{{HTMLVersionInline(4)}} only
- URL 描述要显示图像的URL描述，是对 alt 文本的补充。
- {{htmlattrdef("name")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}
- 元素的名字。在 {{HTMLVersionInline(4)}} 只向后兼容。 使用 id 属性替代。
- {{htmlattrdef("sizes")}}{{HTMLVersionInline(5)}}
- A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of:
- a media condition. This must be omitted for the last item.
- a source size value.
Source size values are used to specify the intended size of the image, for the purpose of selecting a source from the list supplied by the
srcsetattribute when it uses 'w' descriptors. The selected size affects the intrinsic size of the image (images inherent size if no explicit CSS styling is applied). If thesrcsetattribute is absent, or contains no values with a width descriptor, then thesizesattribute has no effect. - {{htmlattrdef("src")}}
- 图像的 URL，这个属性对
<img>元素来说是必需的。在支持srcset 的浏览器中，src被当做拥有一个像素密度的描述符1x的候选图像处理，除非一个图像拥有这个像素密度描述符已经被在srcset或者srcset包含 'w' 描述符中定义了. - {{htmlattrdef("srcset")}}{{HTMLVersionInline(5)}}
- A list of one or more strings separated by commas indicating a set of possible images for the user agent to use. 每一个字符串由以下组成：
- 一个图像的 URL
- 可选的，whitespace followed 以下任选其一：
- 一个宽度描述符，那是一个相对的整数 直接跟在 '
w' 后面。宽度描述符被隔开 by the source size given in thesizesattribute to calculate the effective pixel density. - 一个像素密度描述符，那是一个相对的浮点数，直接跟在 '
x' 后面。
- 一个宽度描述符，那是一个相对的整数 直接跟在 '
如果没有指定源描述符，那它会被指定为默认的
1x。在相同的
srcset属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。重复的描述符（比如，两个源 在相同的srcset两个源都是 '2x'）也是无效的。浏览器选择在给出的时间点显示大部分 adequate 图片。
- {{htmlattrdef("width")}}
- 图像的宽度，在 {{HTMLVersionInline(5)}} 中单位是 CSS 像素， 在 {{HTMLVersionInline(4)}} 中可以是像素也可以是百分比。
- {{htmlattrdef("usemap")}}
- 与元素相关联的的 image map 的部分 URL（以 '#' 开始的部分）。
使用说明： 你不能使用这个属性，如果
<img>元素是 {{htmlelement("a")}} 或 {{HTMLElement("button")}} 元素的后代元素。 - {{htmlattrdef("vspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}
- 插入到图像的上方和下方的空白像素的数组。
支持的图像格式
HTML 标准并没有给出必须支持的图像格式的列表，因此每个用户代理支持一组不同的格式。 Gecko 支持：
- JPEG
- GIF，包括动态的GIFs
- PNG
- APNG {{gecko_minversion_inline("1.9.2")}}
- SVG {{gecko_minversion_inline("2.0")}}
- BMP
- BMP ICO
- PNG ICO {{gecko_minversion_inline("9.0")}}
说明：
对 XBM 格式的支持已经在 Gecko 的 1.9.2 版本中被移除了。
与 CSS 的交互
关于 CSS，<img> 是一个 替换元素。它没有基线，这意味着当在一个行内格式的上下文中使用 {{cssxref("vertical-align")}}: baseline 时，图像的底部将会与容器的基线对齐。
根据它的类型，图像可能会有一个本征维数（intrinsic dimension），但这不是一个必要条件：SVG图像就没有，而光栅图像有。
例 1
<img src="mdn-logo-sm.png" alt="MDN">
例 2：图像链接
<a href="https://developer.mozilla.org/"><img src="mdn-logo-sm.png" alt="MDN"></a>
例 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">
规范
| 规范 | 状态 | 说明 |
|---|---|---|
| {{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '<img>')}} | {{Spec2('HTML WHATWG')}} | |
| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '<img>')}} | {{Spec2('HTML5 W3C')}} | |
| {{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '<img>')}} | {{Spec2('HTML4.01')}} |
浏览器的兼容性
{{CompatibilityTable}}
| 特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本支持 | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
| srcset 属性 | {{CompatChrome(34.0)}} | {{CompatGeckoDesktop("32.0")}} (behind a pref) | {{CompatNo}} | {{CompatOpera(21)}} | {{CompatSafari(7.1)}} |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本支持 | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
| srcset 属性 | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | iOS 8 |
另见
- {{HTMLElement("object")}} 和 {{HTMLElement("embed")}} 元素