To get the image src and set the image src using jQuery attr(). In this tutorial, you will learn how to get and set the image src using jQuery.
jQuery Get and Set Image Src Example
The attr() method to get and change the image source in jQuery.
Get Image Src
Here is the syntax to get image src in jQuery:
$(document).ready(function() {
$('.btn').click(function(){
$imgsrc = $('img').attr('src');
alert($imgsrc);
});
});
Set the Image Src
Here is the syntax to set image src in jQuery:
$(document).ready(function() {
$('.btn').click(function(){
$("img").attr("src",'test.png');
});
});
Here is an example of dynamically set and get image src in jquery:
<html>
<head>
<title> How to get and set image src attribute example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
$('.btn').click(function(){
$imgsrc = $('#first').attr('src');
$("#second").attr("src",$imgsrc);
});
});
</script>
<style>
.card{
margin: 30px;
}
</style>
</head>
<body>
<div class="card">
<img src="//www.tutsmake.com/wp-content/uploads/2019/08/How-to-Encode-Decode-a-URL-Using-JavaScript.jpeg" width="100" id="first" alt="Poker Card">
</div>
<div class="card">
<img src="//www.tutsmake.com/wp-content/uploads/2019/08/How-to-Download-Install-XAMPP-on-Windows.jpeg" width="100" id="second" alt="Poker Card">
</div>
<button type="type" class="btn">Get & Set image src</button>
</body>
</html>
In the above example, we have got the first image src and set the src to the second image.
Conclusion
In this article, you have learned how to get the image tag src and set the image tag src using jQuery attr() with example.
Recommended jQuery Tutorials
- How to Get the Current Page URL in jQuery
- jQuery Ajax Get() Method Example
- get radio button checked value jquery by id, name, class
- jQuery Set & Get innerWidth & innerHeight Of Html Elements
- jQuery Get Data Text, Id, Attribute Value By Example
- Set data attribute value jquery
- select multiple class in jquery
- How to Remove Attribute Of Html Elements In jQuery
- How to Checked Unchecked Checkbox Using jQuery
- jQuery removeClass & addClass On Button Click By E.g.
