HTMLImageElement - 操作 <img> 元素

HTMLImageElement 接口提供了用于操作 <img> 元素的特有属性和方法。

构造函数

Image()

Image() 的构造函数，参数为两个可选的 unsigned long，它们表示资源的宽度和高度，该构造函数创建了一个 HTMLImageElement 实例，但是不插入到 DOM 树中。

在功能上等同于调用 document.createElement("img")。

属性

从其父类 HTMLElement 继承了属性。

HTMLImageElement.align

一个 DOMString，表示图像相对于周围环境的对齐方式。可能的值是 "left"，"right"，"justify" 和 "center"。

HTMLImageElement.alt

一个 DOMString，它反映了 alt HTML 属性，指示了图像的回退上下文。

HTMLImageElement.border

一个 DOMString，它负责图像周围的边框宽度。现在不推荐使用，而应使用 CSS border 属性。

HTMLImageElement.complete 只读

返回 Boolean，如果浏览器已完成提取图像，无论是否成功，都为 true。如果图像没有 src 值，它也会返回 true。

HTMLImageElement.crossOrigin

一个 DOMString，表示该图像元素的 CORS 设置。有关更多详细信息，请参阅 CORS 设置属性。

HTMLImageElement.currentSrc 只读

返回一个 DOMString，表示当前显示图像的 URL（可能会更改，例如响应媒体查询）。

HTMLImageElement.decoding

返回一个 DOMString，表示给浏览器提示如何解码图像的提示。

HTMLImageElement.height

一个 unsigned long ，它反映了 height HTML 属性，表示以 CSS 像素为单位渲染图像的高度。

HTMLImageElement.hspace

一个 long 代表图像两侧的空间。

HTMLImageElement.isMap

一个 Boolean，它反映了 ismap HTML 属性，表明图像是服务器端图像映射的一部分。

HTMLImageElement.longDesc

一个 DOMString，表示图像的长描述的 URI。

HTMLImageElement.lowSrc

一个 DOMString，表示是图像的低质量（但加载速度更快）副本。

HTMLImageElement.name

一个 DOMString，表示元素的名称。

HTMLImageElement.naturalHeight 只读

返回一个 unsigned long，表示 CSS 像素中图像的原始高度（如果可用）；否则，它显示 0。

HTMLImageElement.naturalWidth 只读

返回一个 unsigned long ，表示 CSS 像素中图像的原始宽度（如果可用）；否则，它将显示 0。

HTMLImageElement.referrerPolicy

一个 DOMString，它反映了 referrerpolicy HTML 属性，指示要使用哪个引用来获取图像。

HTMLImageElement.src

一个 DOMString，它反映了 src HTML 属性，包含图像的完整 URL，包括基础 URI。

HTMLImageElement.sizes

一个 DOMString，它反映了 sizes HTML 属性。

HTMLImageElement.srcset

一个 DOMString，它反映了 srcset HTML 属性，包含候选图像列表，用逗号分隔（',', U+002C COMMA）。候选图像是一个 URL，后面跟着带有图像宽度的 w，或者 x，接着后面跟着像素密度。

HTMLImageElement.useMap

一个 DOMString，它反映了 usemap HTML 属性，包含地图元素的部分 URL。

HTMLImageElement.vspace

一个 long 代表图像上方和下方的空间。

HTMLImageElement.width

一个 unsigned long ，它反映了 width HTML 属性，表示以 CSS 像素为单位渲染图像的宽度。

HTMLImageElement.x 只读

返回一个 long，表示距离最近层的水平偏移量。该属性模仿旧的 Netscape 4 行为。

HTMLImageElement.y 只读

返回一个 “long”，表示距离最近层的垂直偏移量。该属性也类似于旧 Netscape 4 的行为。

方法

从其父类 HTMLElement 继承了方法。

HTMLImageElement.decode()

返回一个 Promise，它在解码图像时解析，并且可以安全地将图像附加到 DOM。这可以防止下一帧的解码延迟。

实例

var img1 = new Image(); // Image 构造函数
img1.src = 'image1.png';
img1.alt = 'alt';
document.body.appendChild(img1);

var img2 = document.createElement('img'); // 使用 DOM HTMLImageElement
img2.src = 'image2.jpg';
img2.alt = 'alt text';
document.body.appendChild(img2);

// 使用文字中的第一个图片
alert(document.images[0].src);

规范

规范	状态	备注
CSS Object Model (CSSOM) View Module Extensions to HTMLImageElement 的定义	工作草案	添加了 x 和y属性。
HTML Living Standard HTMLImageElement 的定义	现行的标准	添加了以下属性：srcset，currentSrc 和 sizes。
HTML5 HTMLImageElement 的定义	推荐	添加了一个构造函数（带有 2 个可选参数）。 以下属性现已过时：name，border，align，hspace，vspace和 longdesc。 以下属性现在是 unsigned long，而不是 long：height 和 width。 添加了以下属性：crossorigin，naturalWidth，naturalHeight 和 complete。
Document Object Model (DOM) Level 2 HTML Specification HTMLImgElement 的定义	已过时	移除了 lowSrc 属性。以下属性现在是 long ，而不是 DOMString：height，width，hspace 和 vspace。
Document Object Model (DOM) Level 1 Specification HTMLImgElement 的定义	已过时	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

1. 图片加载失败时，IE 返回 false。

2. 也可能在早期版本中受支持。

相关链接

• 实现该接口的 HTML 元素：<img>