How to Change Image Source JavaScript

JavaScript can integrate with HTML to fulfill the demands of users. By integration, users can employ a feature to change the image source. For instance, the src property is utilized to specify the image source. The sources may include a local file system as well as the image URL. This guide serves to change the image source file by utilizing the src property. All the latest browsers support the src property for locating the source image.

This post serves the following learning outcomes:

Mục Lục

How to Change the Image Source in JavaScript

JavaScript is essential for dynamically changing the display of the image. For instance, the img HTML element provides the src property to modify the source of the image. The source of the image may be a local system or any URL image.

The syntax to apply the src property using JavaScript is provided below:

Syntax

document.

getElementById

(

“myImageId”

)

src

“newSource.png”

;

Parameter

The description of the parameters is as follows:

myImageId: specifies the image id.
src: refers to the source of the image.

Example 1: Change Image Source of the Local Image

An example is adapted to change the source of an image through the local file in JavaScript. The example comprises HTML and JavaScript code files.

HTML Code

html

body

center

img

“imgid”

width

“200”

height

“200”

src

“computer.jpg”

“image”

button

onclick

“changeScr()”

center

>button ><

body

html

script

src

“test.js”

script

Example to Change the Image Source in JavaScriptChange Image Button

In this code, the src attribute is utilized to fetch the image “computer.jpg“. After that, a “Change Image Button” is added to the HTML file that triggers the changeScr() method. The changeScr() method is written in a JavaScript file.

JavaScript Code

function

changeScr

(

)

{

document.

getElementById

(

“imgid”

)

src

“books.jpg”

;

}

In this code, the changeSrc() method fetches the element using its id “imgid” and sets the value of the “src” attribute of that element.

Output

The output shows that after pressing the “Change Image Button” the source file of the image is changed, and the new image is displayed.

Example 2: Change Image Source of a Web-Based Image

Another example is employed for changing the image source through the URL in JavaScript. The complete code is divided into HTML and JavaScript files.

HTML Code

html

body

center

img

“imgid”

width

“250”

height

“250”

src

“https://cdn.pixabay.com/photo/2020/02/26/08/59/fireworks-4881190__340.jpg”

“image”

button

onclick

“changeScr()”

center

>button ><

body

html

script

src

“test.js”

script

Example to Change Web Image Source in JavaScriptChange Image

The description of the code is as below:

Firstly, the width and height of the image are assigned to the image within <img> tags.
After that, the URL of an image is provided by the src property to display the image in the browser window.

JavaScript Code

function

changeScr

(

)

{

document.

getElementById

(

“imgid”

)

src

“https://cdn.pixabay.com/photo/2022/07/28/23/42/rainbow-7350780__340.jpg”

;

}

In this code, the changeScr() method is used to trigger an event when the user clicks on the button to change the source of the image.

Output

The output illustrates that when a user clicks on the “Change Image”, the new image is replaced with the existing one.

Conclusion

JavaScript provides a src attribute to change the image source by specifying the path of the file. For instance, the getElementId() method is utilized to extract the HTML element through id, and then the src property will change the source image. After extraction, the new source image file is assigned. Here, you have learned to change the image source in JavaScript. For this, we have demonstrated a set of examples in various scenarios.