功能 | img

HTML 元素将一份图像嵌入文档。

支持的图像格式

缩写 文件格式 MIME 类型 文件拓展名 浏览器兼容性
APNG Animated Portable Network Graphics
动态便携式网络图像
image/apng .apng Chrome, Edge, Firefox, Opera, Safari
BMP Bitmap file
位图文件
image/bmp .bmp Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
GIF Graphics Interchange Format
图像互换格式
image/gif .gif Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
ICO Microsoft Icon
微软图标
image/x-icon .ico, .cur Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
JPEG Joint Photographic Expert Group image
联合影像专家小组图像
image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
PNG Portable Network Graphics
便携式网络图像
image/png .png Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
SVG Scalable Vector Graphics
可缩放矢量图形
image/svg+xml .svg Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
TIFF Tagged Image File Format
标签图像文件格式
image/tiff .tif, .tiff 无未被内置;需要插件或拓展
WebP Web Picture format
万维网图像格式
image/webp .webp Chrome, Edge, Firefox, Opera

图像加载错误

如果在加载或渲染图像时发生错误,且设置了至少一个 onerror 事件处理器来处理 error 事件,那么设置的事件处理器就会被调用。这样的错误可能发生在各种不同的情况下,包括:

  1. src 属性的属性值为空("")或者 null。
  2. src 属性的 URL 和用户正在浏览的页面的 URL 完全相同。
  3. 图像出于某些原因损坏了,从而无法加载。
  4. 图像的元数据被破坏了,无法检索它的分辨率/宽高,而且在 元素的属性中没有指定宽度和/或高度。
  5. 用户代理尚未支持该图片所用的格式。

属性

此元素支持全局属性。

src

属性是必须的,它包含了你想嵌入的图片的文件路径。

alt

定义了图像的备用文本描述。

属性包含一条对图像的文本描述,这不是强制性的,但对可访问性而言,它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听,让他们知道图像的含义。如果由于某种原因无法加载图像,普通浏览器也会在页面上显示alt 属性中的备用文本:例如,网络错误、内容被屏蔽或链接过期时。

如果省略 alt 属性,则表明该图像是内容的关键部分,但没有等效的文本可用。 如果把这个属性设置为空字符串(alt=""),则表明该图像不是内容的关键部分(这是一种装饰或者一个追踪像素点),非可视化浏览器在渲染的时候可能会忽略它。而且,如果图片加载失败,可视化浏览器会隐藏表示图片损坏的图标。

将图像复制并粘贴为文本,或是将图像的链接保存为浏览器书签时,也会用到此属性。

Referrer/CORS

控制,保证安全与隐私.

width、height 和 intrinsicsize

设置 原始分辨率:这将设置图像应占用的空间,以确保图像被加载之前页面的布局是稳定的。

{htmlattrxref("sizes", "img")}} 和 srcset

设置响应式图像.

width

图像的宽度,在 HTML5 中单位是 CSS 像素, 在 HTML 4 中可以是像素也可以是百分比。

height

图像的高度,在 HTML5 中的单位是 CSS 像素,在 HTML 4 中既可以是像素,也可以是百分比。可以只指定 width 和 height 中的一个值,浏览器会根据原始图像进行缩放。

src

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

usemap

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