How to Change the src of an Image using jquery?

0
()

Solution: Use the jQuery attr() Method for jquery change image src

You can use the jquery attr() method to change or update on replace or on click button events of the image source (like as a the source attribute of the HTML img tag) in jQuery or JavaScript. The Bellow 3+ example will replace the image source when you just clicks on the this image also you can read my prev post for jquery find by id.

jquery find by id & jquery change image source

change image src with jquery

"image

$("#my_moviesID").attr("src","media/khatrimaza.png");

javascript img source

change image source plain javascript

document.getElementById('my_moviesID').src="media/khatrimaza.png";

You can simply my_movies use the jquery default function attr().
$("#my_movies").attr("src","tamilrockers.jpg");

html image onclick (img onclick)

using img onclick

$(document).ready(function () {
$('img').click(function(){
$(this).attr('src','media/tamilrockers.jpeg')
})
})

How to Change the Image Source Using jQuery?

Set image src to another image using jquery

replace or update the src of the image, not of the div or any HTML Tags:

Read Also:  jQuery Display Image Based on Image URL with Example

JS CODE

$('.pakainfo img').click(function() {
var loc = $(this).attr("src");
$('#image-zoom img').attr("src",loc);
});

Free Live Chat for Any Issue

HTML Code

<div class="container pakainfo">
<div id="image-zoom"><img class="img-bolly4u zoom" alt="tamilrockers proxy" /></div>
<div class="row">
<div class="col-sm-12"><img id="zoom" class="img-bolly4u zoom" src="upload/01.png" alt="Khatrimaza" />
<img class="img-bolly4u zoom" src="upload/02.png" alt="a2movies" />
<img class="img-bolly4u zoom" src="upload/03.png" alt="mkvcinema" /></div>
</div>
<div class="row">
<div class="col-sm-12"><img class="img-bolly4u zoom" src="upload/04.png" alt="ssrmovies" />
<img class="img-bolly4u zoom" src="upload/05.png" alt="bolly4u" />
<img class="img-bolly4u zoom" src="upload/06.png" alt="oKhatrimaza" /></div>
</div>
</div>

jquery change picture source of image

index.html

<style>
    .card{<br />        margin: 10px;<br />    }<br /></style>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("img").click(function(){
        // Change src attribute of image
        $(this).attr("src", "https://www.pakainfo.com/wp-content/uploads/2019/06/jquery-image-upload-preview-Delete-option.png");
    });    
});
</script>

<strong>IMP Note:</strong>Please Click on the image to replace its Images source.

 
<div class="card"><img src="https://www.pakainfo.com/wp-content/uploads/2020/06/Tamilrockers-alternatives-Top-10-Similar-sites-like-Tamilrockers.png" alt="Poker Card" /></div>

IMP Note: here above demo jquery find by id and run your HTML Page, then you can click function jquery on the image to change its Images source.

Read Also:  how to get value from ajax response in php?
Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

Download

I hope you get an idea about jquery change image src & change multiple images on click jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  jQuery Find Nested Parent Child Elements HTML DOM

How useful was this post?

Click on a star to rate it!