. Advertisement .
..3..
. Advertisement .
..4..
Changing an image src is not straightforward for Javascript beginners. This tutorial will introduce you to how to change the src of an image in Javascript.
What Is An Image SRC Property?
The src property sets and returns an image’s src attribute value. This value is used to specify the image’s URL. The property is prone to changes at any time. Yet, the later one will still inherit the original image’s height and width.
- Return the property: imageObject.src
- Set the src property: imageObject.src = URL
How To Change The SRC Of An Image In Javascript
You can change the src attribute of an image programmatically with Javascript. The first step is to use Javascript element selector methods to grab the HTML element.
getElementById() and querySelector() functions are two common methods to assign elements to a variable.
Code:
var youtubeimgsrc = document.getElementById(“youtubeimg”).src;
After this step, a new string value should be assigned to its src property:
<body>
<img id="banner" src="image.jpg" />
<script>
const img = document.getElementById("banner");
img.src = "newImage.png";
</script>
</body>
If you store the specified image in another folder, you should add an image path to this src attribute as well. Here is the code to change the src attribute inside the assets/ folder:
img.src = "./assets/newImage.png";After having this new image loaded to the element, it is time to run some Javascript code. This way, an onload event loader is added to your img element:
const img = document.getElementById("banner");
img.onload = function () {
alert("New image has been loaded");
};
img.src = "newImage.png";
Now you should receive an alert notifying the complete process.
Example
<!DOCTYPE HTML>
<html>
<head>
<title>
Change the src attribute
of an img tag
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<img id = "img" src =
"image URL" />
<br>
<button onclick = "GFG_Fun()">
click here
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var up = document.getElementById('GFG_UP');
up.innerHTML = "Click on button to change the src of image";
var down = document.getElementById('GFG_DOWN');
function GFG_Fun() {
document.getElementById("img").src =
'image URL';
down.innerHTML = "src attribute changed";
}
</script>
</body>
</html>
How To Clear Image SRC Using Javascript
const img = document.getElementById('img');There are two methods to clear an image src attribute:
- Hide the image elements. In this case, you set the image’s ‘display’ property to ‘none’.
img.style.display = 'none';- Use the setAttribute() function to set the src attribute to an empty string.
img.setAttribute('src', '');Conclusion
How to change the src of an image in Javascript? This tutorial has offered some methods to make use of Javascript to deal with the image src attribute. Src attribute is used to specify your image’s URL. For this reason, setting a new src will allow you to change the image when needed.
Leave a comment