Using JavaScript and jQuery, there are different ways to change the image path given in the src attribute of the 
element in an HTML document.
How to use JavaScript to change the src attribute of the img element−
Use the src attribute in JavaScript.
How to use jQuery to change the src attribute of the img element−
Use attr() method
Use prop() method
Let us discuss the above listed methods of changing the src of the img element in detail one by one.
Using the src attribute in JavaScript
JavaScript allows us to use the src attribute to get the value that has been assigned to it, and also to update or change the value of the same attribute. This is a very common way to change the value of the src attribute of an img element.
Syntax
The following syntax will explain to you how to use the src attribute in JavaScript to change the value of the src attribute of the img element -
Selected_image_element.src = " new value ";
Let us understand the practical implementation of this approach through a code example.
algorithm
-
Step 1 − In the first step, we will add an img element with a src attribute associated with it, whose value we will change later using the src property in JavaScript.
Step 2 - In this step, we will add a button element with an onclick event and call a function to change the src of the image when the user clicks the button.
Step 3 - In the next step, we will define a JavaScript function in which we will get the img element using its ID and then change the src attribute using Switch between two images.
Step 4 − In the last step, we will assign the function to the onclick event defined in the last step to see the changes on user screen.
Example
is:Example
The following example will explain to you how to actually use the src attribute in JavaScript to change the src attribute of an img.
<html>
<body>
<h2 id="Change-the-src-attribute-of-an-img-element">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="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" src = "https://img.php.cn/" id = "image" alt="How to change the src attribute of an img element in JavaScript/jQuery?" > <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");
function changeSrc() {
var img = document.getElementById('image');
if (img.src == "https://img.php.cn/") {
img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoLnvRnTNP2rojd7e9b_Ilw5zZkSlPotSPIA&usqp=CAU";
result.innerHTML += " The src of above img is changed from <b> Link 1 </b> to " + " <b> Link 2 </b> <br>";
}
else {
img.src = "https://img.php.cn/";
result.innerHTML += " The src of above img is changed from <b> Link 2 </b> to " + " <b> Link 1 </b> <br>";
}
upper.innerHTML = " The image shown previously is replaced by some other image as <b> src attribute of img is changed. </b> <br> ";
}
</script>
</body>
</html>
In this example, we use the src attribute in JavaScript to change the src attribute of the img element in the HTML document. Here, we switch between two images every time the button is clicked.
Using the attr() method in jQuery
We can also use the attr() method in JavaScript to change the src attribute.
attr() method - The attr() method accepts two parameters. The first parameter is the name of the attribute to be changed, expressed in string form, and the other parameter is the new value to be assigned to the attribute. value.
Syntax
The following syntax will explain to you how the attr() method with parameters is implemented−
attr(" attribute_name ", " new_value ");
Let us understand the implementation of this method in detail through a code example.
algorithm
-
Step One - In the
of the <script> element of the document we will add the jQuery link <src> </script> -
Step 2 - In this step, we will use an img element with a src attribute, and later use jQuery's attr() method to modify it
-
Step 3 - In step 3 we will add a button element which will later be given an onclick event and a function using jQuery
-
Step 4 − In the next step, we will use jQuery's "$" syntax to get each element and perform tasks on each element.
-
Step 5 − In the last step, we will use jQuery’s on() method to assign an onclick event to the button, so that when the user clicks the button, It calls the function given in it and the changes are visible to the user.
The Chinese translation of
is:
ExampleThe following example will illustrate using the attr() method in jQuery to change 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 id="Change-the-src-attribute-of-an-img-element-using-jQuery">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="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" src = "https://img.php.cn/" id = "image" alt="How to change the src attribute of an img element in JavaScript/jQuery?" > <br> <br>
<button id = "btn">Click to change the Image</button>
<p id = "result"> </p>
<script>
$("#btn").on('click', function (e) {
$('#image').attr("src", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoLnvRnTNP2rojd7e9b_Ilw5zZkSlPotSPIA&usqp=CAU");
$("#result").html(" The src of above img is changed from <b> Link 1 </b> to " + " <b> Link 2 </b> <br>");
$("#upper").html(" The image shown previously is replaced by some other image as <b> the src attribute of img is changed. </b> <br> ");
});
</script>
</body>
</html>
Use the prop() method in jQuerySimilar to the attr() method, jQuery also provides the prop() method to change the value of any attribute to a new value.
prop() method − The prop() method can be used as we used the attr() method in previous example. It takes property name and the new value to be assigned as parameters.
We can use the prop() method to set values to single properties and multiple properties.Syntax
Following syntax will show you how you can use the prop() method for different purposes −
Change the value of a specific attribute −
prop(" attribute_name ", " new_value ");
Change the values of multiple attributes −
prop({ attribute_name: new_value, attribute_name: new_value });
In the second syntax, we provide multiple properties with their new values at the same time. Let us learn more about the usage of prop() method through code examples.
algorithm
The algorithm of this example is almost similar to the algorithm of the previous example. You just need to replace the attr() method in the previous algorithm with the prop() method and the job will be done.
The Chinese translation of
Exampleis:
ExampleThe following example will explain to you how the prop() method changes the value of the src attribute of the img element in an HTML document -
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h2 id="Changing-the-src-attribute-of-an-img-element-using-jQuery">Changing 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="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" id = "image" alt="How to change the src attribute of an img element in JavaScript/jQuery?" > <br> <br>
<button id = "btn">Click to change the Image</button>
<p id = "result"> </p>
<script>
$("#btn").on('click', function (e) {
$('#image').prop("src", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoLnvRnTNP2rojd7e9b_Ilw5zZkSlPotSPIA&usqp=CAU");
$("#result").html(" The src of above img is changed from <b> Link 1 </b> to " + " <b> Link 2 </b> <br>");
$("#upper").html(" The image shown previously is replaced by some other image as <b> src attribute of img is changed. </b> <br> ");
});
</script>
</body>
</html>
In the above example, we used the prop() method in jQuery to change the src attribute of the img element in the HTML document.
In this article, we have discussed about the three different methods of changing the value of the src attribute of an img element using the JavaScript as well as jQuery. We have understand all the methods in details by practically implementing them inside the code examples, which helps to build the practical knowledge of the concepts.
The above is the detailed content of How to change the src attribute of an img element in JavaScript/jQuery?. For more information, please follow other related articles on the PHP Chinese website!
Replace String Characters in JavaScriptMar 11, 2025 am 12:07 AMDetailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi
8 Stunning jQuery Page Layout PluginsMar 06, 2025 am 12:48 AMLeverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation
Build Your Own AJAX Web ApplicationsMar 09, 2025 am 12:11 AMSo here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J
How do I create and publish my own JavaScript libraries?Mar 18, 2025 pm 03:12 PMArticle discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.
Load Box Content Dynamically using AJAXMar 06, 2025 am 01:07 AMThis tutorial demonstrates creating dynamic page boxes loaded via AJAX, enabling instant refresh without full page reloads. It leverages jQuery and JavaScript. Think of it as a custom Facebook-style content box loader. Key Concepts: AJAX and jQuery
10 jQuery Fun and Games PluginsMar 08, 2025 am 12:42 AM10 fun jQuery game plugins to make your website more attractive and enhance user stickiness! While Flash is still the best software for developing casual web games, jQuery can also create surprising effects, and while not comparable to pure action Flash games, in some cases you can also have unexpected fun in your browser. jQuery tic toe game The "Hello world" of game programming now has a jQuery version. Source code jQuery Crazy Word Composition Game This is a fill-in-the-blank game, and it can produce some weird results due to not knowing the context of the word. Source code jQuery mine sweeping game
How to Write a Cookie-less Session Library for JavaScriptMar 06, 2025 am 01:18 AMThis JavaScript library leverages the window.name property to manage session data without relying on cookies. It offers a robust solution for storing and retrieving session variables across browsers. The library provides three core methods: Session
jQuery Parallax Tutorial - Animated Header BackgroundMar 08, 2025 am 12:39 AMThis tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later. Download the
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
SublimeText3 English version
Recommended: Win version, supports code prompts!
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
SublimeText3 Linux new version
SublimeText3 Linux latest version
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
