JQuery Get and Set Image Src Example
Overview
How to get the image src and set the image src using jQuery attr(). In this article, you will learn how to get and set the image src using jQuery.
The attr() method to get and change the image source in jQuery.
Get Image Src
Use the below script to get image src.
$(document).ready(function() {
$('.btn').click(function(){
$imgsrc = $('img').attr('src');
alert($imgsrc);
});
});Set the Image Src
Use the below script to set the image src.
$(document).ready(function() {
$('.btn').click(function(){
$("img").attr("src",'test.png');
});
});Let’s take an example
The following example will change the second image to the first image
<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="//image-name-with-source.jpeg" width="100" id="first" alt="Poker Card">
</div>
<div class="card">
<img src="//image-name-with-source.jpeg" width="100" id="second" alt="Poker Card">
</div>
<button type="type" class="btn">Get & Set image src</button>
</body>
</html>Check This Also
Difference between AngularJS and Angular 2 Make a Mobile app in just 10 minutes With Ionic Framework Angular 9: What to Expect in New Version of Angular Alert (Toaster) Notifications in Angular 8About Post Author
