[Edit]

JavaScript - Image() documentation with examples

1 contributors

2 contributions

0 discussions

0 points

Created by:

Fletcher-Peralta

778

The Image() constructor lets us create objects representing HTML <img> elements using JavaScript code in web browsers.

xxxxxxxxxx
 
// create image
var image = new Image();
image.src = 'https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png';
​
// append image in body
document.body.appendChild(image);

Auto running

Syntax	`new Image()` `new Image(width)` `new Image(width, height)`
Typed syntax	`new Image(width?: number, height?: number): HTMLImageElement;`
Parameters	`width` - the width of the new image element (used as `width` attribute), `height` - the height of the new image element (used as `height` attribute).
Result	The constructor returns a new `HTMLImageElement` object representing an HTML `<img>` element which is not attached to any DOM tree. When called without parameters, `new Image()` is equivalent to the `document.createElement('img')` method call.
Description	The `Image()` constructor lets us create a new `HTMLImageElement` instance, that represents an HTML `<img>`element.

Practical example

Edit

In this example, we use the Image() constructor to create an image element, then we set its src and append in body element. Additionally, we set a lazy loading for the image.

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
  <script>
​
    // create image
    var image = new Image();
    image.src = 'https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png';
​
    // set lazy loading
    image.loading = 'lazy';
​
    // append image in body
    document.body.appendChild(image);
​
  </script>
</body>
</html>