HTMLImageElement: Image() constructor
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
TheImage()constructor creates a newHTMLImageElement instance. It is functionallyequivalent todocument.createElement('img').
Note:This function should not be confused with the CSSimage() function.
Syntax
new Image()new Image(width)new Image(width, height)Parameters
widthOptionalThe width of the image (i.e., the value for the
widthattribute).heightOptionalThe height of the image (i.e., the value for the
heightattribute).
Usage note
The entire bitmap is loaded regardless of the sizes specified in the constructor. Thesize specified in the constructor is reflected through the propertiesHTMLImageElement.width andHTMLImageElement.height of theresulting instance. The intrinsic width and height of the image in CSS pixels arereflected through the propertiesHTMLImageElement.naturalWidth andHTMLImageElement.naturalHeight. If no size is specified in theconstructor both pairs of properties have the same values.
Examples
const myImage = new Image(100, 200);myImage.src = "picture.jpg";document.body.appendChild(myImage);This would be the equivalent of defining the following HTML tag inside the<body>:
<img width="100" height="200" src="picture.jpg" />Specifications
| Specification |
|---|
| HTML # dom-image-dev |