How to Change Image Source in JavaScript

function changeImage() {
 var img = document.getElementById('image');
 img.setAttribute('src', 'new_image.jpg');
 }

Using the setAttribute() method

The setAttribute() method in JavaScript allows us to change the source of an image by assigning a new URL to the ‘src’ attribute of an img element. Here’s an example:

 function changeImage() {
 var img = document.getElementById('image');
 img.setAttribute('src', 'new_image.jpg');
 }

How it works

The setAttribute() method modifies the value of the ‘src’ attribute of the img element, effectively changing the image displayed on the webpage.

• First, we get a reference to the image element by using document.getElementById('image'). This assumes that the img element has an id of “image”.
• Next, we call the setAttribute() method on the img element. This method takes two arguments: the name of the attribute to change, and the new value for the attribute.
• In this case, we are changing the ‘src’ attribute, which specifies the URL of the image. The new value is ‘new_image.jpg’, which is the filename of the new image we want to display.
• The image source is now updated, and the new image will be displayed on the webpage.

By directly modifying the src property

Changing the image source in JavaScript using the ‘src’ property allows you to dynamically modify an image on your webpage. We will take an example of an image with an id ‘myImage’, and change its source using JavaScript.

document.getElementById('myImage').src = 'newImage.jpg';

How it works

JavaScript allows us to access and manipulate HTML elements. In this case, we are accessing an image element using its ‘id’ and modifying its ‘src’ attribute to change the image.

• First, we use document.getElementById('myImage') to select the image element with the id ‘myImage’.
• Then, we use the .src property to get or set the ‘src’ attribute of the selected image element.
• Finally, we set the ‘src’ property to ‘newImage.jpg’, which is the new image file we want to display. This file should be located at the root of your project or you should provide the relative path to the file.

Using the dot notation method

In JavaScript, you can easily change an image’s source by selecting the image element and then using dot notation to alter its ‘src’ attribute; an example can simplify this concept.

// JavaScript
document.getElementById('myImage').src = 'newImage.jpg';

How it works

This script selects the image element with the id ‘myImage’ and changes its source attribute to ‘newImage.jpg’, effectively replacing the original image with a new image.

• First, ‘document.getElementById(‘myImage’)’ is used to select the HTML image element with the id ‘myImage’. The document object represents the web page loaded into the browser and ‘getElementById’ is a method it provides to select an element by its id.
• Then, ‘.src’ is used to refer to the ‘src’ (source) attribute of the selected image element. The ‘src’ attribute specifies the path to the image file.
• Finally, ‘= ‘newImage.jpg” assigns a new value to the ‘src’ attribute, thereby changing the image that is displayed on the web page. ‘newImage.jpg’ should be the path to the new image file.