3 STEPS To Create & Add An Image In JavaScript

In this JavaScript tutorial, I’m going to show you how to add an image to your website using JavaScript.

1. Create An Image Element Object Using createElement()
2. Set An Image URL To An Image Element
3. Show The Image On The Browser

1. Create An Image Element Object Using createElement()

The first step is to create an image element object in JavaScript using the createElement() method.

createElement() is one of the DOM API methods that the browser offers to interact with the DOM tree.

It allows you to create any type of HTML element.

3 Ways To Create HTML Element In JavaScript

This method takes an argument which will be the HTML element that I want to create.

In this case…<img />

const image = document.createElement("img");

When you call the createElement() method with the tag name as an argument on the document object, it will return an HTML element object.

Assign it to a constant called image.

2. Set An Image URL To An Image Element

The second step is to set an image URL using the .src property of the image element object.

Let’s assume that there is an images folder and it has an image.png file in your project folder with the same root level of your index.html and main.js file.

const image = document.createElement("img");
image.src = "images/image.png";

Assign the location path of the image file inside quotes to the .src property of the image element object.

So the file path will be…images/image.png inside the quotes.

Alternatively, I can also use the third-party URL of an image.

Here is one of the websites that offers free image urls with random images.

https://picsum.photos/300/400

3. Show The Image On The Browser

The third step is to show the image on the browser.

In other words, add the image element to the DOM tree.

At this stage, I’ve successfully created an image element object and set an image to it but it’s not yet inserted to the DOM. (Document Object Model)

The DOM (Document Object Model) is the tree structure representation of the HTML file rendered inside the browser.

const image = document.createElement("img");
image.src = "images/image.png";
document.body.appendChild(image):

Let’s add the image element object inside the body element by calling appendChild() on the document.body object.

Pass the image element as an argument to the appendChild() method.

And the image becomes visible on the browser.

Create An Image Using The Image() Constructor

There is another way to create an image element using the Image Object Constructor.

The Image object is a built-in JavaScript constructor specifically designed for handling image-related operations.

To use the Image constructor, all I have to do is to replace the document.createElement(“img”) code with new Image().

const image = new Image();
image.src = "images/image.png";
document.body.appendChild(image):

The second and third lines of the code remain the same.

And it works like before.