How to create an image element using JavaScript?

Published September 8, 2020

Using the Image() constructor function

To create an image element using JavaScript, you can use the Image() constructor function available in the global window object.

// create an image element
const image = new Image();

The constructor function accepts 2 parameters:

  • The first parameter is the width of the image
  • The second parameter is the height of the image
// create an image element
const image = new Image(200, 200);

Now we need to specify a source for the image element, you can do that using the src property in the image object.

// create an image element
const image = new Image(200, 200);

// source for the image element
// source means the link to the image
image.src = "https://via.placeholder.com/200";

You can add attributes to the image element using the dot . followed by the name of the attribute.

For example, to add alt attribute, you can use the alt property in the image object like this,

// create an image element
const image = new Image(200, 200);

// source for the image element
// source means the link to the image
image.src = "https://via.placeholder.com/200";

// adding alt attribute
image.alt = "A simple placeholder image";

Using the document.createElement() function

You can alternatively create image elements using the document.createElement() method like this,

// create image element
const image = document.createElement("img");
  • The method needs a valid tag name as a string.

To add src and alt tag you need to use the dot . operator followed by attribute name like this,

// create image element
const image = document.createElement("img");

// add attributes src and alt
image.src = "https://via.placeholder.com/200";
image.alt = "A simple placeholder image";

See live example on both ways in JSBin

Feel free to share if you found this useful 😃.

Share on: Facebook Twitter