Change HTML image src using JavaScript code
You can change an HTML image src attribute programatically by using JavaScript. First, you need to grab the HTML element by using JavaScript element selector methods like getElementById() or querySelector() and assign the element to a variable.
After you have the element, you can assign a new string value to its src property as follows:
When you have the image in another folder, than you need to add the image path to the src attribute as well. The code below shows how to change the src attribute to an image inside the assets/ folder:
Finally, if you need to run some JavaScript code after a new image has been loaded to the element, you can add an onload event loader to your img element before changing the src attribute as follows:
Using the above code, an alert will be triggered when the new image from the src attribute has been loaded to the HTML page.
Learn JavaScript for Beginners ��
Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.
A practical and fun way to learn JavaScript and build an application using Node.js.
About
Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.
Change the “src” attribute of an image using JavaScript.
This is a tutorial on how to change the “src” attribute of an image using JavaScript.
The src attribute specifies the URL of an image. Therefore, by setting a new src, we can dynamically change the image in question.
In this post, I will show you how to accomplish this using both regular JavaScript and jQuery.
Changing the src attribute using regular JavaScript.
If you’re not already using jQuery, then there is no sense in including the library just to manipulate the src attribute. Instead, you can just use vanilla JavaScript, which tends to be faster.
Take a look at the example below:
If you run the snippet above, you will see that the src attribute of our image element is replaced by our JavaScript code.
A more verbose example for those of you who want to understand what is going on here:
In this case, we have broken the process up into two steps:
- We retrieved the img element from our HTML DOM by using the method document.getElementById(). We passed “myImage” in as the parameter because that is the ID of our image.
- After retrieving the img, we were able to modify its src attribute and assign a new URL.
This will force the browser to load our new image.
Changing the img src using jQuery.
If you’re already using the jQuery library and you would like to keep your code consistent, you can use the following method:
In the code above, we referenced the image by its ID and then used jQuery’s attr() method to set a new value for its src attribute.
Determining when the new image is loaded.
If you need to do something after the new image has loaded, then you can attach jQuery’s load() method to our example above:
Once jQuery has changed the src property and the image from the new URL has been loaded in the browser, the code inside the load() method will execute. However, this load block will not execute if the image in question doesn’t exist.
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:
The first step is to query the DOM for this image. We can do this by using the querySelector() method.
Now that we have our element, we can change the src attribute of the image.
This turns the DOM into this:
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.
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!
Programmatically change the src of an img tag
How can I change the src attribute of an img tag using javascript?
at first I have a default src which is "../template/edit.png" and I wanted to change it with "../template/save.png" onclick.
UPDATED: here’s my html onclick:
I’ve tried inserting this inside the edit(), it works but need to click the image twice
9 Answers 9
Give your img tag an id, then you can
You can use both jquery and javascript method: if you have two images for example:
For this type of issue jquery is the simple one to use.
if you use the JQuery library use this instruction:
Give your image an id. Then you can do this in your javascript.
You can use this syntax to change the value of any attribute of any element.
With the snippet you provided (and without making assumptions about the parents of the element) you could get a reference to the image with
and change the src with
so you could achieve the desired effect with
otherwise, as other suggested, if you’re in control of the code, it’s better to assign an id to the image a get a reference with getElementById (since it’s the fastest method to retrieve an element)