Hi Guys,
Today, I will learn you how to get and set image src in jquery. We will show easy example of jquery get and set image src.The attr() method to get and change the image source in jQuery.
Get Image SrcIn this example,I will Use the below script to get image src.
$(document).ready(function() {
$('.btn').click(function(){
$imgsrc = $('img').attr('src');
alert($imgsrc);
});
});
Set the Image Src
In this example,I will Use the below script to set image src.
$(document).ready(function() {
$('.btn').click(function(){
$("img").attr("src",'test.png');
});
});
Full Example
Now,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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNSCowfKvdA_XwYJ4PViv9gQ-q50eeykM2E9FIdmSlIakgoW5QckWzOFc-WSBIZkBGkRXcefsoRVoPfP2UDM7qxUkoVc1IWSxhlZ0ZHx40BgJMO9eDkq1vQ18JWIhLW0C5W9owKiMdShmT/s0/Laravel+Custom+ENV+Variables+Tut.png" width="100" id="first" alt="Blog Image"">
</div>
<div class="card">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpipA6pqFifEWR4qswk86MZvHOBRC9JKkJhtSTDDoQYfe-mDETt1DGzsLy1X_i9bwNBdHnM812ftqImUIZqvjtBponL-G36pDZ4wVWzhjfKphtGgVf5NaL5J5q_2mEO9MX_2XpPe5nu04Q/s0/laravel-email-vali.png" width="100" id="second" alt="Blog Image">
</div>
<button type="type" class="btn">Get & Set image src</button>
</body>
</html>
It Will help you....