How to Change Img Src using JavaScript

The cool thing about JavaScript is that you can use it to programmatically alter the DOM.
This includes the ability to change an image's src
attribute to a new value, allowing you to change the image being loaded.
In this post, we will learn how we can use JavaScript to change the src
attribute of an image.
Chaning an Image's src
Attribute
Let's assume this is our DOM:
<img src="cat.png" class="image" />
The first step is to query the DOM for this image. We can do this by using the querySelector()
method.
const image = document.querySelector(".image");
Now that we have our element, we can change the src
attribute of the image.
const image = document.querySelector(".image");
image.src = "dog.png";
This turns the DOM into this:
<img src="dog.png" class="image" />
On Load
Sometimes, you want to run some code after the image has loaded. Thankfully, this is easily accomplished by simply adding an event listener to the image.
const image = document.querySelector(".image");
image.addEventListener("load", () => {
console.log("The image has loaded!");
});
Now, when the image has loaded, the function will execute, printing to the console. You can do whatever you want, including changing the src
attribute of the image to another image.
Conclusion
In this post, we've seen how we can use JavaScript to change the src
attribute of an image.
If you want, you can also run some code after the image has loaded.
Hopefully, you've enjoyed this post, thanks for reading!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!
Leave us a message!