HTML <img> 元素

HTML <img> 元素 表示文档中的一个图像。

如何插入图像：

<img src="//uploads-10001577.cos.ap-shanghai.myqcloud.com/images/logo.png" alt="蜜蜂教程" width="180" height="64">

尝试一下 »

特性

内容类别	流式内容，短语内容，嵌入内容，可触知内容。如果该元素具有 usemap 属性，那么它也属于 交互内容 类别。
允许的内容	无，它是一个空元素。
标签省略	必须有一个开始标签，不允许有结束标签。
允许的父元素	接受嵌入内容的任意元素。
允许的 ARIA 角色	任意
DOM 接口	Image 对象

属性

该元素包含了 全局属性。

HTML5 中不支持以下属性：align、border、hspace、vspace。

在 HTML 4.01 中，以下属性：align、border、hspace、vspace 已废弃。

align

已废弃 HTML4.01，已过时 HTML5

使图像与其周围上下文的对齐。在 HTML5，使用 CSS 的 float 和/或 vertical-align 属性代替。

可选值有：

• top
• bottom
• middle
• left
• right

alt

该属性定义了描述图像的替换文本。如果图像 URL 错误，图像不在支持的格式中，或者图像尚未下载，用户将看到此文本。

浏览器并不总是显示该元素的图像。例如非图形浏览器（包括视力障碍者使用的浏览器）中，如果用户选择不显示图像，或是浏览器因为图片无效而不显示，或是因为不支持的格式而无法显示图像。在这些情况下，浏览器可能会使用该元素的 alt 属性中定义的文本来替换图像。由于这些原因，你应该尽可能在 alt 中提供有用的信息。

省略此属性表示该图像是内容的关键部分，并且没有等效的文本来代替。将此属性设置为空字符串（alt =""）表示该图像不是内容的关键部分，非可视浏览器在渲染时可能会忽略它。

border

已废弃 HTML4.01，已过时 HTML5

图像边框的宽度。在HTML5中，使用 CSS 的 border 属性。

crossorigin

HTML5

此枚举属性表示是否必须使用 CORS 来完成相关图像的读取。启用 CORS 的图像在 <canvas> 元素中可以重复使用，而不会被"被污染"。允许的值有：

• anonymous
  执行一个跨域的请求（比如，有 Origin: HTTP 头），但是没有发送证书（比如，没有 cookie，没有 X.509 证书，没有 HTTP 基本的授权认证）。如果服务器没有给源站证书（没有设置 Access-Control-Allow-Origin: HTTP头），图像会被污染而且它的使用会被限制。

• use-credentials
  执行一个跨域的请求（比如，有 Origin: HTTP 头），有发送证书（比如，cookie, 证书，HTTP 基本的授权认证）。如果服务器没有给源站发送证书（通过 Access-Control-Allow-Credentials: HTTP 头），图像将会被污染，且它的使用会受限制。

当未使用该属性时，不使用 CORS 发起请求（例如，不会发送 Origin: HTTP 头），从而防止其污染 <canvas> 元素的使用。如果属性的值是无效的，则当做 anonymous 来处理。更多信息，请查看 CORS 设置的属性 。

height

图像的高度（以像素为单位）。在 HTML 4 中，高度可以被定义为像素或百分比。但是，在 HTML5 中，该值必须以像素为单位。

hspace

已废弃 HTML4.01，已过时 HTML5

要插入图像左侧和右侧的空白像素数。在HTML5中，改用 CSS 的 margin 属性。

ismap

该布尔属性表示图像是服务器端映射的一部分。如果是这样，点击的精确坐标被发送到服务器。

仅当 <img> 元素是 href 属性有效的 <a> 元素的后代时，才允许使用该属性。

longdesc

指向图像的更详细描述的链接。可能的值是 URL 或元素 ID。

name

已废弃 HTML4.01，已过时 HTML5

元素的名称。在 HTML 4 中支持只是为了向后兼容性。改用 id 属性。

referrerpolicy

实验性

一个字符串，指示在获取资源时使用哪种 Referrer 头：

• no-referrer: 将不发送 Referer 头.
• no-referrer-when-downgrade: 如果图片的源站不是 TLS（HTTPS）时，不会发送 Referer 头。如果没有指定任何策略，则这是用户代理的默认行为。
• origin: Referer 头会包括页面的协议、主机和端口。
• origin-when-cross-origin: 导航到其他源时，将限制所包含数据只有协议，主机和端口，而导航到相同的源将包含来源者的完整路径。
  同时从相同的起点导航将包括引荐来源的完整路径。
• unsafe-url: Referer 头将包含源站和路径，但不包括片段（fragment），密码或用户名。这种情况是不安全的，因为它可能会将受 TLS 保护的资源中的源和路径，泄露到不安全的源。

sizes

HTML5

用逗号分隔的一个或多个字符串的列表，指示一组源大小。每个源大小包括：

1. 一个媒体的条件。最后一项必须省略的。
2. 一个源的大小值。

资源大小值指定图像的预期显示大小。当这些源使用（'w'）描述符时，用户代理使用当前源的大小来选择 srcset 属性提供的一个源。所选的源尺寸会影响图像的固有大小（如果图片的显示大小未被 CSS 样式更改过的话）。如果没有设置 “srcset” 属性，或者没有宽度（w）描述符的值，那么 sizes 属性没有任何作用。

src

图像的 URL。该属性对于 <img> 元素是必需的。在支持 srcset 的浏览器中，src 被当做拥有有一个像素密度的描述符 1x 的候选图像处理，除非图像的 srcset 或 srcset 包含的 'w' 描述符已经定义了拥有这个像素密度描述符的图像。

srcset

HTML5

一个或多个字符串的列表，以逗号分隔，指示用户代理使用的一组可能的图像源。每个字符串由以下组成：

1. 一个图像的 URL，
2. 可选的，空格后跟以下其一：

• 一个宽度描述符，或一个正整数，后面紧跟着 'w' 符号。宽度描述符除以 sizes 属性中给出的源大小，来计算出有效像素密度。
• 一个像素密度描述符，它是一个个正浮点数，后面紧跟着 'x' 符号。

如果没有指定描述符，则将为源分配默认描述符为 1x。

在同一个 srcset 属性中混合宽度描述符和像素密度描述符是不正确的。重复的描述符（例如，同一个 srcset 中的两个源都用 2x 描述）也是无效的。

用户代理可自行选择任何一个可用的来源。这为他们提供了基于用户偏好或带宽条件等方面的重要选择余地。

width

图像的宽度（以像素为单位）。在 HTML 4 中，可以是百分比或像素。在 HTML5 中，只能是像素。

usemap

与 image map 元素相关联的部分URL（以 '#' 开头）。

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

vspace

已废弃 HTML4.01，已过时 HTML5

要插入图像上方和下方的空白像素数。在HTML5中，改用 CSS margin 属性。

事件属性

<img> 元素支持 HTML 的事件属性。

支持的图片格式

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

• JPEG
• GIF，包括动态的 GIFs
• PNG
• APNG
• SVG
• BMP
• BMP ICO
• PNG ICO

与 CSS 交互

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

根据它的类型，图像可能具有固有的宽度和高度。然而，对于某些图像类型，固有尺寸不是必需的。例如，SVG 图像就没有固有的尺寸。

错误

如果在尝试加载或渲染图像时发生错误，并且配置了 onerror 事件处理程序来处理 error 事件，则该事件处理程序将被调用。这可能发生在许多情况下，包括：

• src 属性为空或是 null。
• 指定的 src URL 与用户当前所在页面的 URL 相同。
• 指定的图像以某种方式损坏，从而阻止它被加载。
• 指定的图像的元数据被破坏，使得不能获得到它的的尺寸，并且没有在 <img> 元素的属性中指定尺寸。
• 指定的图像使用的是用户代理不支持的格式。

实例1：设置替换文本

<img src="//uploads-10001577.cos.ap-shanghai.myqcloud.com/images/logo.png" alt="蜜蜂教程">

尝试一下 »

实例2：设置图像链接

<a href="/">蜜蜂教程<img src="//uploads-10001577.cos.ap-shanghai.myqcloud.com/images/logo.png" alt="蜜蜂教程"></a>

尝试一下 »

实例3：使用 srcset 属性

src 属性的图片是支持 srcset 的用户代理的 1x 候选图片。

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

实例4：使用 srcset 和 sizes 属性

在使用 'w' 描述符时，支持 srcset 的用户代理将忽略 src 属性。当 (min-width: 600px) 的媒体条件匹配时，图像宽度将为 200 像素，否则为 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">

实例5：从不同的位置插入图片 - 本例演示如何将其他文件夹或服务器的图片显示到网页中。

<p>插入来自一个文件夹的图片：</p>
<img src="/examples/stickman-1.gif" alt="Stickman" width="24" height="39">

<p>插入来自一个网站的图片：</p>
<img src="//s.mifengjc.com/examples/lamp-4.gif" alt="Lamp" width="15" height="15">

尝试一下 »

实例6：创建图像地图 - 本例演示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。

<p>点击太阳或其他行星，注意变化：</p>

<img src="/examples/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="/examples/sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="/examples/mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

尝试一下 »

HTML 与 XHTML 之间的差异

在 HTML 中，<img> 标签没有结束标签。

在 XHTML 中，<img /> 标签必须被正确地关闭。

规范

规范	状态	备注
Referrer Policy referrer attribute 的定义	编者的草案	增加了 referrerpolicy 属性。
HTML Living Standard <img> 的定义	现行的标准	-
HTML5 <img> 的定义	推荐	-
HTML 4.01 Specification <img> 的定义	推荐	-

桌面浏览器兼容性

移动浏览器兼容性

1. 从版本 32 开始到版本 52 (不包括)：该特性由 dom.image.srcset.enabled 首选项控制（需要设置为 true）。要更改 Firefox 中的首选项，请访问 about:config。

相关链接

• <picture>，<object> 和 <embed> 元素
• HTML 教程：HTML 图像