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:
- How to Change the Image Source in JavaScript
- Example 1: Change Image Source of Local File Image in JavaScript
- Example 2: Change Image Source of Web Based Image in JavaScript
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
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
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
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
<body>
<center>
<h2>Example to Change Web Image Source in JavaScript</h2>
<img id="imgid" width="250" height="250" src="https://cdn.pixabay.com/photo/2020/02/26/08/59/fireworks-4881190__340.jpg" id="image" />
<br> </br>
<button onclick="changeScr()">Change Image </button></center>
</body>
</html>
<script src="test.js"> </script>
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
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.
