この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください!
この記事を English (US) で読むこともできます。

The HTMLImageElement interface provides special properties and methods for manipulating <img> elements.

Constructor

Image()
The Image() constructor, taking two optional unsigned longs, which are the width and the height of the resource, creates an instance of HTMLImageElement, not inserted in a DOM tree.
Functionally equivalent to calling document.createElement("img").

Properties

Inherits properties from its parent, HTMLElement.

HTMLImageElement.align
Is a DOMString indicating the alignment of the image with respect to the surrounding context. The possible values are "left", "right", "justify", and "center".
HTMLImageElement.alt
Is a DOMString that reflects the alt HTML attribute, thus indicating fallback context for the image.
HTMLImageElement.border
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 Read only
Returns a Boolean 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 value.
HTMLImageElement.crossOrigin
Is a DOMString representing the CORS setting for this image element. See CORS settings attributes for further details.
HTMLImageElement.currentSrc Read only
Returns a DOMString representing the URL to the currently displayed image (which may change, for example in response to media queries).
HTMLImageElement.decoding
Returns a DOMString representing a hint given to the browser on how it should decode the image.
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 on either side 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 that refers to a low-quality (but faster to load) copy of the image.
HTMLImageElement.name
Is a DOMString representing the name of the element.
HTMLImageElement.naturalHeight Read only
Returns a unsigned long representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows 0.
HTMLImageElement.naturalWidth Read only
Returns a unsigned long representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show 0.
HTMLImageElement.referrerPolicy
Is a DOMString that reflects the referrerpolicy HTML attribute indicating which referrer to use in order to fetch the image.
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 reflecting the sizes HTML attribute.
HTMLImageElement.srcset
Is 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 a 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 is also similar to behavior of an old Netscape 4.

Methods

Inherits properties from its parent, HTMLElement.

Errors

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

  • The src 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.

Example

var img1 = new Image(); // Image 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

Specification Status Comment
CSS Object Model (CSSOM) View Module
The definition of 'Extensions to HTMLImageElement' in that specification.
Working Draft Added the x and y properties.
HTML Living Standard
The definition of 'HTMLImageElement' in that specification.
Living Standard The following properties have been added: srcset, currentSrc and sizes.
HTML5
The definition of 'HTMLImageElement' in that specification.
Recommendation A constructor (with 2 optional parameters) has been added.
The following properties are now obsolete: name, border, align, hspace, vspace, and longdesc.
The following properties are now unsigned long, instead of long: height, and width.
The following properties have been added: crossorigin, naturalWidth, naturalHeight, and complete.
Document Object Model (DOM) Level 2 HTML Specification
The definition of 'HTMLImgElement' in that specification.
Obsolete The lowSrc property has been removed.
The following properties are now long, instead of DOMString: height, width, hspace, and vspace.
Document Object Model (DOM) Level 1 Specification
The definition of 'HTMLImgElement' in that specification.
Obsolete Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
Image() constructorChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android ? Safari iOS Full support YesSamsung Internet Android ?
completeChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support 5
Notes
Full support 5
Notes
Notes IE reports false for broken images.
Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android ? Safari iOS Full support YesSamsung Internet Android ?
crossoriginChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android ? Safari iOS Full support YesSamsung Internet Android ?
currentSrc
Experimental
Chrome Full support YesEdge Full support YesFirefox Full support 38
Full support 38
No support 32 — 52
Disabled
Disabled From version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support YesSafari No support NoWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 38
Full support 38
No support 32 — 52
Disabled
Disabled From version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android ?
decodingChrome Full support YesEdge ? Firefox Full support 63IE No support NoOpera Full support YesSafari No support NoWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 63Opera Android ? Safari iOS No support NoSamsung Internet Android ?
lowSrcChrome Full support YesEdge Full support YesFirefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
naturalHeightChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS Full support YesSamsung Internet Android ?
naturalWidthChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS Full support YesSamsung Internet Android ?
onerrorChrome No support NoEdge ? Firefox Full support 51
Notes
Full support 51
Notes
Notes May also be supported in earlier versions.
IE No support NoOpera Full support YesSafari Full support YesWebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android Full support 51Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
referrerPolicyChrome Full support 51Edge No support NoFirefox Full support 50IE No support NoOpera Full support 38Safari Full support 11.1WebView Android Full support 51Chrome Android Full support 51Edge Mobile No support NoFirefox Android Full support 50Opera Android Full support 38Safari iOS No support NoSamsung Internet Android ?
sizes
Experimental
Chrome Full support YesEdge Full support YesFirefox Full support 38
Full support 38
No support 33 — 52
Disabled
Disabled From version 33 until version 52 (exclusive): this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support YesSafari No support NoWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 38
Full support 38
No support 33 — 52
Disabled
Disabled From version 33 until version 52 (exclusive): this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android ?
srcset
Experimental
Chrome Full support 34Edge Full support YesFirefox Full support 38
Full support 38
No support 32 — 52
Disabled
Disabled From version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 21Safari Full support 8WebView Android Full support 37Chrome Android Full support 34Edge Mobile Full support YesFirefox Android Full support 38
Full support 38
No support 32 — 52
Disabled
Disabled From version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS Full support 8Samsung Internet Android ?
xChrome Full support YesEdge Full support YesFirefox Full support 14
Full support 14
No support ? — 7
IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 14
Full support 14
No support ? — 7
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
yChrome Full support YesEdge Full support YesFirefox Full support 14
Full support 14
No support ? — 7
IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 14
Full support 14
No support ? — 7
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also

  • The HTML element implementing this interface: <img>