Create an Image Element using JavaScript

avatar

Borislav Hadzhiev

Fri Jan 07 20222 min read

banner

Photo by Linh Nguyen

Create an Image Element using JavaScript #

To create an image element:

  1. Use the document.createElement() method to create the img element.
  2. Use the setAttribute() method to set the src attribute on the element.
  3. Add the element to the page using the appendChild() method.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box"></div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const image = document.createElement('img'); // ๐Ÿ‘‡๏ธ Local image // image.setAttribute('src', 'my-img.png'); // ๐Ÿ‘‡๏ธ Remote image image.setAttribute( 'src', 'http://bobbyhadz.com/images/blog/javascript-show-div-on-select-option/banner.webp', ); image.setAttribute('alt', 'nature'); image.setAttribute('height', 350); // ๐Ÿ‘ˆ๏ธ height in px image.setAttribute('width', 550); // ๐Ÿ‘ˆ๏ธ width in px // ๐Ÿ‘‡๏ธ optionally style the image image.style.border = '5px solid yellow'; image.onerror = function handleError() { console.log('Image could not be loaded'); // ๐Ÿ‘‡๏ธ Can set image.src to a backup image here // image.src = 'backup-image.png' // ๐Ÿ‘‡๏ธ Or hide image // image.style.display = 'none'; }; image.onload = function handleImageLoaded() { console.log('image loaded successfully'); }; const box = document.getElementById('box'); box.appendChild(image);

We used the document.createElement method to create the img element.

The only parameter we passed to the method is the type of element to be created (img in the example).

The createElement method returns the newly created element.

We used the setAttribute method to set multiple attributes on the img element.

The setAttribute method takes 2 parameters:

  1. name - the name of the attribute whose value is to be set.
  2. value - the value to assign to the attribute.
If the attribute already exists on the element, the value is updated, otherwise a new attribute is added with the specified name and value.

We set the src attribute to a remote image in the example, however this could be an image on your local file system as well.

We set the image's alt, height and width attributes.

The alt attribute defines the alternative text description of the image. It is mostly used for screen readers.

The width and height properties can be set to a number (without a unit) and represent the image's width and height in pixels.

You can also set these properties on the style object of the element.

index.js
const image = document.createElement('img'); // ๐Ÿ‘‡๏ธ Remote image image.setAttribute( 'src', 'http://bobbyhadz.com/images/blog/javascript-show-div-on-select-option/banner.webp', ); image.setAttribute('alt', 'nature'); image.style.border = '5px solid yellow'; image.style.height = '350px'; image.style.width = '550px';

We added the onload event handler on the img element.

The load event fires when the image has loaded successfully.

You can also add the onerror event on the element. The event fires when the image fails to load.

If the image fails to load, you can use the onerror event to show a default image or hide the element.

Note - you don't have to add these event handlers if you don't need to invoke a function when the script is loaded / fails to load.

There are many other attributes you might need to set on the img element depending on your use case. Here is a complete list from the MDN img docs.

If I load the example from the article in my browser, I can see that the image is created and shown successfully.

image created successfully

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee