October 5, 2021

How to Change Image Source using Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to change image source using javascript. Whenever we want to add an image to a web project, we make use of the img tag. The img tag comes with a bunch of useful attributes and the src attribute is one of them.

The src stands for source. In fact, without the src attribute, we will not be able to specify what image we want to be displayed. We can also indicate the size of an image by using height and width attributes. However, in the modern world, most developers prefer CSS to specify the size of the image.

Javascript is not required if we want to display a static image using an img tag. But if we want to change the source or display an image dynamically, then we have to make use of javascript. The img element has src property and we can leverage this to dynamically change the source of the image.

In the following example, we have multiple images in the images directory. We also have 4 button elements and one image element. Upon click of each button, we will pick one image from the images directory and set it as a source of the image element. Please have a look over the code example and the steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, img, and button). The div element is just a wrapper for the button elements.
By default, we have 1.jpg as a source for the image element.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.

We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div>
        <button id="btn1">1</button>
        <button id="btn2">2</button>
        <button id="btn3">3</button>
        <button id="btn4">URL</button>
    </div>

    <img src="images/1.jpg" alt="">
    <script src="script.js"></script>
</body>
</html>

div {
    text-align: center;
    margin-bottom: 20px;
}

button {
    height: 50px;
    width: 50px;    
}

img {
    display: block;
    width: 250px;
    margin: auto;
}

Javascript

We have selected all the button elements and the img element using the document.querySelector() method and stored them in the btn1, btn2, btn3, btn4, and img variables respectively.

We have attached a click event listener to all the button elements.
In the click event handler function of each button element, we are using the src property of the img element to change the image with one of the images present in the images directory.
In the case of the 4th click event handler function, we are not picking an image from the images directory using a relative URL rather we are using an absolute URL. The browser will load the image from that absolute URL.

let img = document.querySelector('img');
let btn1 = document.querySelector('#btn1');
let btn2 = document.querySelector('#btn2');
let btn3 = document.querySelector('#btn3');
let btn4 = document.querySelector('#btn4');

btn1.addEventListener('click', () => {
    img.src = 'images/1.jpg';
})

btn2.addEventListener('click', () => {
    img.src = 'images/2.jpg';
})

btn3.addEventListener('click', () => {
    img.src = 'images/3.jpg';
})

btn4.addEventListener('click', () => {
    img.src = 'https://i.imgur.com/ypYJ8dy.jpg';
})

You May Also Like: