Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to change the src attribute of an img element in JavaScript / jQuery?
There are different methods to change the path of an image given to the src attribute of an img element in HTML document using JavaScript and jQuery.
Method of changing the src attribute of an img element using JavaScript:
Use the src property in JavaScript.
Methods of changing the src attribute of an img element using jQuery:
Using attr() method
Using prop() method
Let us discuss each of the above listed methods of changing the src of an img element one by one in details.
Using src Property in JavaScript
JavaScript allows us to use the src property to get the already assigned value as well as to update or change the value of the same attribute. It is the most common method of changing the value of src attribute of an img element.
Syntax
selectedImageElement.src = "new_image_path";
Example
Below example demonstrates how to use the src property to change the src attribute of an img element in JavaScript:
<html>
<body>
<h2>Change the src attribute of an img element</h2>
<p id="upper">The image shown below will be changed once you click the button.</p>
<img src="/html/images/logo.png" id="image" alt="Original Image">
<br><br>
<button id="btn" onclick="changeSrc()">Click to change the Image</button>
<p id="result"></p>
<script>
var result = document.getElementById("result");
var upper = document.getElementById("upper");
var isOriginal = true;
function changeSrc() {
var img = document.getElementById('image');
if (isOriginal) {
img.src = "/css/images/css-mini-logo.jpg";
result.innerHTML = "The src of above img is changed from <b>Original Image</b> to <b>New Image</b><br>";
isOriginal = false;
} else {
img.src = "/html/images/logo.png";
result.innerHTML = "The src of above img is changed from <b>New Image</b> to <b>Original Image</b><br>";
isOriginal = true;
}
upper.innerHTML = "The image shown previously is replaced by another image as <b>src attribute of img is changed.</b><br>";
}
</script>
</body>
</html>
In this example, we have used the src property in JavaScript to change the src attribute of an img element. We toggle between two images every time we click the button using a boolean flag for better tracking.
Using attr() Method in jQuery
We can also change the src attribute using the attr() method in jQuery. The attr() method takes two parameters: the attribute name as a string and the new value to assign to the attribute.
Syntax
$(selector).attr("attribute_name", "new_value");
Example
Below example illustrates the use of the attr() method in jQuery to change the src attribute of an img element:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h2>Change the src attribute of an img element using jQuery</h2>
<p id="upper">The image shown below will be changed once you click the button.</p>
<img src="/html/images/logo.png" id="image" alt="Original Image">
<br><br>
<button id="btn">Click to change the Image</button>
<p id="result"></p>
<script>
$("#btn").on('click', function (e) {
$('#image').attr("src", "/css/images/css-mini-logo.jpg");
$("#result").html("The src of above img is changed from <b>Original Image</b> to <b>New Image</b><br>");
$("#upper").html("The image shown previously is replaced by another image as <b>the src attribute of img is changed.</b><br>");
});
</script>
</body>
</html>
Using prop() Method in jQuery
Similar to the attr() method, jQuery also provides a prop() method to change the value of any property. The prop() method is preferred for properties like src, href, checked, etc., as it works with the actual DOM property rather than the HTML attribute.
Syntax
Changing value of a single property:
$(selector).prop("property_name", "new_value");
Changing values of multiple properties:
$(selector).prop({
property_name1: "new_value1",
property_name2: "new_value2"
});
Example
Below example explains how the prop() method changes the value of the src attribute of the img element:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h2>Changing the src attribute of an img element using jQuery prop()</h2>
<p id="upper">The image shown below will be changed once you click the button.</p>
<img src="/html/images/logo.png" id="image" alt="Original Image">
<br><br>
<button id="btn">Click to change the Image</button>
<p id="result"></p>
<script>
$("#btn").on('click', function (e) {
$('#image').prop("src", "/css/images/css-mini-logo.jpg");
$("#result").html("The src of above img is changed from <b>Original Image</b> to <b>New Image</b><br>");
$("#upper").html("The image shown previously is replaced by another image as <b>src attribute of img is changed.</b><br>");
});
</script>
</body>
</html>
Comparison
| Method | Framework | Best Use Case |
|---|---|---|
element.src |
Vanilla JavaScript | Simple, direct property access |
attr() |
jQuery | HTML attributes, older jQuery versions |
prop() |
jQuery | DOM properties (recommended for src) |
Conclusion
All three methods effectively change the src attribute of img elements. Use vanilla JavaScript's src property for simple cases, jQuery's prop() method for DOM properties, and attr() method for HTML attributes. The prop() method is generally preferred over attr() in jQuery for properties like src.
16K+ Views
