HTMLImageElement

The HTMLImageElement interface provides special properties and methods (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of <img> elements.

Properties

Inherits properties from its parent, HTMLElement.

HTMLImageElement.align

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

HTMLImageElement.alt

Is a DOMString that reflects the alt HTML attribute, indicating fallback context for the image.

HTMLImageElement.border

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

HTMLImageElement.complete Read only

Returns a Boolean that is true if the browser has fetched the image, and it is in a supported image type that was decoded without errors.

HTMLImageElement.crossOrigin

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

HTMLImageElement.currentSrc Read only

Returns a DOMString

HTMLImageElement.height

Is a unsigned long that reflects the height HTML attribute, indicating the rendered height of the image in CSS pixels.

HTMLImageElement.hspace

Is a long representing the space to the left and right of the image.

HTMLImageElement.isMap

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

HTMLImageElement.longDesc

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

HTMLImageElement.lowSrc

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

HTMLImageElement.name

Is a DOMString

HTMLImageElement.naturalHeight Read only

Returns an unsigned long representing the intrinsic height of the image in CSS pixels, if it is available; otherwise, 0.

HTMLImageElement.naturalWidth Read only

Returns an unsigned long representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, 0.

HTMLImageElement.src

Is a DOMString that reflects the src HTML attribute, containing the full URL of the image including base URI.

HTMLImageElement.sizes

Is a DOMString

HTMLImageElement.srcset

IIs a DOMString reflecting the srcset 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

Is a DOMString that reflects the usemap HTML attribute, containing a partial URL of a map element.

HTMLImageElement.vspace

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

HTMLImageElement.width

Is an unsigned long that reflects the width HTML attribute, indicating the rendered width of the image in CSS pixels.

HTMLImageElement.x Read only

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

HTMLImageElement.y Read only

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

Methods

Inherits properties from its parent, HTMLElement.

Image()

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

Example

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);

Specifications

Browser compatibility

[1] The x and y properties were removed in Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) but 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.

See also

• The HTML element implementing this interface: <img>