©
This document uses PHP Chinese website manual Release
HTML 元素表示文档中的图像<img> 。
内容类别 | 流内容，短语内容，嵌入内容，可触及的内容。如果元素具有usemap属性，它也是交互式内容类别的一部分。 |
|---|---|
允许的内容 | 没有，这是一个空的元素。 |
标记遗漏 | 必须有开始标签，并且不得有结束标签。 |
允许 parents | 任何接受嵌入内容的元素。 |
允许ARIA角色 | 任何 |
DOM界面 | HTMLImageElement |
属性
该元素包含全局属性。
自HTML4.01以来不推荐使用align，自HTML5以来已过时图像与其周围环境对齐。在HTML5中，改为使用float和/或vertical-alignCSS属性。alt属性定义描述图像的替代文字。如果图像URL错误，图像未使用支持的格式，或者图像尚未下载，用户将看到此文本。
浏览器并不总是显示元素引用的图像。非图形浏览器（包括视力障碍者使用的浏览器），用户选择不显示图像，或浏览器由于无效或不支持类型而无法显示图像的情况就是这种情况。在这些情况下，浏览器可能会用此元素alt属性中定义的文本替换图像。出于这些原因和其他原因，您应该尽可能为alt提供有用的价值。
完全忽略属性表明图像是内容的关键部分，并且没有可用的文本等效内容。将此属性设置为空字符串（alt="")表示此图像不是内容的关键部分，非视觉浏览器可能会忽略它。
已过时图像周围边框的宽度border自HTML4.01起弃用。在HTML5中，改用borderCSS属性。HTML5枚举属性指示是否必须使用CORS来获取相关图像。启用CORS的图像可以在元素中重用，而不会被“污染”。允许的值为：执行跨源请求（即，使用HTTP标头）。但是没有发送证书（即没有cookie，没有X.509证书，也没有发送HTTP基本认证）。如果服务器未向原始站点提供凭据（通过未设置HTTP标头），则图像将受到污染并且其使用受到限制。crossorigin<canvas>anonymousOrigin:Access-Control-Allow-Origin:use-credentialsOrigin:使用凭证执行跨源请求（即使用HTTP标头），即发送cookie（即，证书和HTTP基本身份验证）。如果服务器没有为原始站点提供凭据（通过Access-Control-Allow-Credentials:HTTP标头），则图像将受到污染并且其使用受到限制。如果不存在，则在没有CORS请求（即不发送Origin:HTTP标头）的情况下获取资源，从而防止其<canvas>元素中的未受污染的使用。如果无效，则将其处理为使用枚举关键字匿名。有关更多信息，请参阅CORS设置属性。height图像的固有高度（以像素为单位）。在HTML 4中，高度可以是像素或百分比。在HTML5中但是，该值必须以像素为单位。hspace自HTML4.01以来不推荐使用，自HTML5以来已过时插入图像左侧和右侧的空白像素数。在HTML5中，改用marginCSS属性。ismap该布尔属性表示图像是服务器端地图的一部分。如果是这样，点击的精确坐标被发送到服务器。
只有当<img>元素是有有效href属性的<a>元素的后具代时，才允许该属性。
longdesc指向图像更详细描述的链接。可能的值是一个URL或元素ID。已过时元素的名称name自HTML4.01起弃用。为了向后兼容，它仅在HTML 4中受支持。改用该id属性。referrerpolicy一个字符串，指示在获取资源时使用哪个引用者：
no-referrer:Referer首标将不被发送。no-referrer-when-downgrade:没有Referer导航到的原点不使用TLS（HTTPS）当报头将被发送。如果没有指定策略，这是用户代理的默认行为。origin:Referer头将包括原产地的计划页面，主机和端口。origin-when-cross-origin:导航到其他来源将限制包含的推荐数据到方案，主机和端口，而从同一来源导航将包括推荐人的完整路径。unsafe-url:Referer报头将包括原点和路径，而不是片段，密码或用户名。这种情况是不安全的，因为它可以将来自TLS保护资源的起源和路径泄漏到不安全的起源。
sizesHTML5以逗号分隔的一个或多个字符串的列表，指示一组源大小。每个源大小包括：
媒体条件。最后一项必须省略。
源大小值。
源大小值指定图像的预期显示大小。srcset当使用宽度（' w'）描述符描述这些源时，用户代理使用当前源大小选择属性提供的源之一。所选的源大小会影响图像的固有大小（如果未应用CSS样式，则图像的显示大小）。如果该srcset属性不存在，或者不包含带有width（w）描述符的值，则该sizes属性不起作用。
src图片网址。属性对于<img>元素是强制性的。在支持的浏览器上srcset，src被视为具有像素密度描述符的候选图像，1x除非具有该像素密度描述符的图像已被定义srcset,或者除非srcset包含w描述符。srcset在HTML5以逗号分隔的一个或多个字符串的列表，指示用户代理可以使用的一组可能的图像源。每个字符串由以下组成：
一个图像的URL，
可选地，空格后跟以下之一：
宽度描述符或直接跟着“
w' 的正整数。宽度描述符除以sizes属性中给出的源大小来计算有效像素密度。一个像素密度描述符，它是一个直接跟着'
x' 的正浮点数。
如果没有指定描述符，则为源分配默认描述符：1x。
在同一个srcset属性中混合宽度描述符和像素密度描述符是不正确的。重复的描述符（例如，两个相同的描述符srcset都用' 2x' 描述）也是无效的。
用户代理可以自行选择任何一个可用的来源。这为他们提供了很大的余地，可以根据用户的喜好或带宽条件来定制他们的选择。
width图像的固有宽度（以像素为单位）。在HTML 4中，百分比或像素是可接受的值。但在HTML5中，只有像素是可以接受的。usemap与元素关联的图像映射的部分网址（以'＃'开头）。
使用注意：如果你不能使用这个属性<img>元素的后代<a>或<button>元素。
已过时插入图像上方和下方的空白像素数vspace自HTML4.01起弃用，在HTML5中，改用marginCSS属性。
支持的图像格式
HTML标准没有提供必须支持的图像格式列表，因此每个用户代理都支持一组不同的格式。Gecko支持：
JPEG
GIF, 包含动态GIF
PNG
APNG
SVG
BMP
BMP ICO
PNG ICO
与CSS的互动
关于CSS，<img>是一个被替代的元素。它没有基线，因此当图像在内联格式化上下文中使用vertical-align: baseline时图像的底部将放置在容器的基线上。
根据其类型，图像可能具有固有的宽度和高度。但对于某些图像类型，内在尺寸不是必需的。例如，SVG图像没有固有的尺寸。
错误
如果尝试加载或渲染图像时发生错误，并且onerror事件处理程序已配置为处理error事件，则事件处理程序将被调用。这可能发生在许多情况下，包括：
src属性为空或null。指定的
srcURL与用户当前所在页面的URL相同。指定的图像以某种方式损坏，导致其无法加载。
指定图像的元数据被损坏，以至于无法检索其维度，并且
<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">
规格
规范 | 状态 | 评论 |
|---|---|---|
引用者策略该规范中“引用者属性”的定义。 | 编辑草稿 | 增加了referrerpolicy属性。 |
HTML Living Standard该规范中'<img>'的定义。 | 生活水平 | |
HTML5该规范中'<img>'的定义。 | 建议 | |
HTML 4.01规范该规范中'<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 | ? |