总结
HTML Image 元素（ <img> ）代表文档中的一个图像。
使用说明：
浏览器并不总是显示该元素中的图像。对于非图形浏览器（包括那些有视力障碍的人所使用的）来说就是这种情况，如果用户选择不显示图像，或者如果浏览器无法显示图像，因为它是无效的或 不支持的类型。在这些情况下，浏览器会用该元素的 alt 属性定义的文本来替换图像。
- 内容类别流式内容，段落内容，嵌入式内容，可触摸内容。如果元素有 {{htmlattrxref("usemap", "img")}} 属性，它也是交互内容的一部分。
- 允许的内容None，它是一个 {{Glossary("空元素")}}.
- 标签省略必须有一个开始标签，不允许有结束标签.
- 允许的父元素接受嵌入式内容的任意元素.
- DOM 接口{{domxref("HTMLImageElement")}}
属性
这个元素包括 全局 属性。
- {{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
- 执行一个跨域的请求（比如，有
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），图像将会被污染，且它的使用会受限制。
- {{htmlattrdef("height")}}
- 图像的高度，在 {{HTMLVersionInline(5)}} 中的单位是 CSS 像素，在 {{HTMLVersionInline(4)}} 中可以是像素也可以是百分比。
- {{htmlattrdef("hspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}
- 插入到图像的左侧和右侧的空白像素的值。
- {{htmlattrdef("ismap")}}
- 这个布尔属性表示图像是否是服务器端map的一部分。如果是， 那么点击的精准坐标将会被发送到服务器。
使用说明：只有当
<img>是 {{htmlattrxref("href","a")}} 属性是有效的 {{htmlelement("a")}} 元素的后代元素时，这个属性才被允许使用。 - {{htmlattrdef("longdesc")}}{{HTMLVersionInline(4)}} only
- URL 描述要显示图像的URL描述，是对 alt 文本的补充。
- {{htmlattrdef("name")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}
- 元素的名字。在 {{HTMLVersionInline(4)}} 只向后兼容。 使用 id 属性替代。
- {{htmlattrdef("sizes")}}{{HTMLVersionInline(5)}}
- 表示资源大小的以逗号隔开的一个或多个字符串。每一个资源大小包括：
- 一个媒体条件。最后一项一定是忽略了的。
- 一个资源尺寸的值。
资源尺寸的值被用来指定图像的预期尺寸，因为当它使用 'w' 描述符要从 srcset 属性提供的列表中选择一个资源。被选中的尺寸影响图像的内在尺寸大小（如果没有冲突的CSS样式那么就会使用图像的内在尺寸）。如果没有srcset，或者没值，那么这个尺寸属性也就没什么作用了。
- {{htmlattrdef("src")}}
- 图像的 URL，这个属性对
<img>元素来说是必需的。在支持srcset的浏览器中，src被当做拥有一个像素密度的描述符1x的候选图像处理，除非一个图像拥有这个像素密度描述符已经被在srcset或者srcset包含 'w' 描述符中定义了. - {{htmlattrdef("srcset")}}{{HTMLVersionInline(5)}}
- 以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成：
- 一个图像的 URL。
- 可选的，空格后跟以下的其一：
- 一个宽度描述符，那是一个相对的整数 直接跟在 '
w' 后面。宽度描述符被sizes属性给出的资源大小隔开以计算有效的像素密度。 - 一个像素密度描述符，那是一个相对的浮点数，直接跟在 '
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")}} 元素