HTMLImageElement

HTMLImageElement 介面提供了特殊的屬性及方法以用來操作 <img> (en-US) 元素的畫面佈局與外觀呈現。

Inherits properties from its parent, HTMLElement.

HTMLImageElement.align (en-US)

Is a DOMString indicating the alignment of the image with respect to the surrounding context.

HTMLImageElement.alt (en-US)

Is a DOMString that reflects the alt (en-US) HTML attribute,  thus indicating fallback context for the image.

HTMLImageElement.border (en-US)

Is a DOMString that is responsible for the width of the border surrounding the image. This is now deprecated and the CSS border property should be used instead.

HTMLImageElement.complete (en-US) Read only

Returns a Boolean (en-US) that is true if the browser has finished fetching the image, whether successful or not. It also shows true, if the image has no src (en-US) value.

HTMLImageElement.crossOrigin (en-US)

Is a DOMString representing the CORS setting for this image element. See CORS settings attributes for further details.

HTMLImageElement.currentSrc (en-US) Read only

Returns a DOMString representing the URL to the currently displayed image (which may change, for example in response to media queries).

HTMLImageElement.height (en-US)

一個反映了 HTML img 元素之 height (en-US) 屬性的無符號（unsigned）整數，表示圖片經渲染後的高度（CSS pixels）。

HTMLImageElement.hspace (en-US)

Is a long representing the space on either side of the image.

HTMLImageElement.isMap (en-US)

Is a Boolean (en-US) that reflects the ismap (en-US) HTML attribute, indicating that the image is part of a server-side image map.

HTMLImageElement.longDesc (en-US)

Is a DOMString representing the URI of a long description of the image.

HTMLImageElement.lowSrc (en-US)

Is a DOMString that refers to a low-quality (but faster to load) copy of the image.

HTMLImageElement.name (en-US)

Is a DOMString representing the name of the element.

HTMLImageElement.naturalHeight (en-US) Read only

回傳一個代表圖片固有高度（CSS pixels）的無符號（unsigned）整數，如果無法取得則回傳 0。

HTMLImageElement.naturalWidth (en-US) Read only

回傳一個代表圖片固有寬度（CSS pixels）的無符號（unsigned）整數，如果無法取得則回傳 0。

HTMLImageElement.referrerPolicy (en-US)

Is a DOMString that reflects the referrerpolicy (en-US) HTML attribute indicating which referrer to use in order to fetch the image.

HTMLImageElement.src (en-US)

Is a DOMString that reflects the src (en-US) HTML attribute, containing the full URL of the image including base URI.

HTMLImageElement.sizes (en-US)

Is a DOMString reflecting the sizes (en-US) HTML attribute.

HTMLImageElement.srcset (en-US)

Is a DOMString reflecting the srcset (en-US) HTML attribute, containing a list of candidate images, separated by a comma (',', U+002C COMMA). A candidate image is a URL followed by a 'w' with the width of the images, or an 'x' followed by the pixel density.

HTMLImageElement.useMap (en-US)

Is a DOMString that reflects the usemap (en-US) HTML attribute, containing a partial URL of a map element.

HTMLImageElement.vspace (en-US)

Is a long representing the space above and below the image.

HTMLImageElement.width (en-US)

一個反映了 HTML img 元素之 width (en-US) 屬性的無符號（unsigned）整數，表示圖片經渲染後的寬度（CSS pixels）。

HTMLImageElement.x (en-US) Read only

Returns a long representing the horizontal offset from the nearest layer. This property mimics an old Netscape 4 behavior.

HTMLImageElement.y (en-US) Read only

Returns a long representing the vertical offset from the nearest layer. This property is also similar to behavior of an old Netscape 4.

Inherits properties from its parent, HTMLElement.

Image() (en-US)

The Image() constructor, taking two optional unsigned long, which are the width and the height of the resource, creates an instance of HTMLImageElement , not inserted in a DOM tree.

If an error occurs while trying to load or render the image, and an onerror event handler has been configured to handle the error (en-US) event, that event handler will get called. This can happen in a number of situations, including:

• The src (en-US) attribute is empty or null.
• The specified src URL is the same as the URL of the page the user is currently on.
• The specified image is corrupted in some way that prevents it from being loaded.
• The specified image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <img> element's attributes.
• The specified image is in a format not supported by the user agent.

var img1 = new Image(); // HTML5 Constructor
img1.src = 'image1.png';
img1.alt = 'alt';
document.body.appendChild(img1);

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

// using first image in the document
alert(document.images[0].src);

[1] Though, these x and y properties were removed in Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) but later, they were restored in Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11) for compatibility reasons.

[2] This feature is behind the dom.image.srcset.enabled preference, defaulting to false.

[3] This feature is behind the dom.image.picture.enabled preference, defaulting to false.

[4] IE reports false for broken images.

[5] May also be supported in earlier versions.

• The HTML element implementing this interface: <img> (en-US)