jquery replace string in url images

Question

please help me how to replace string url image from s120

s120/demo%2Bproduct%2Blipstik.jpg

to

s400/demo%2Bproduct%2Blipstik.jpg

//jQuery
$(document).ready(function(){
  $("#largeimage").click(function(){
        $(".container img").attr("src").replace("s120","s400");
    });
});

html

<div class="container center">
  <img src="https://2.bp.blogspot.com/-NwKHFcL48ZA/WJ2FANm2TXI/AAAAAAAAA6Y/hE-85KroGacBYy26mnEbkEGYFcnyWWv4gCLcB/s120/demo%2Bproduct%2Blipstik.jpg">
</div>
<p>
<button class="center" id="largeimage">Large Image to 400</button>
</p>

DEMO

Pranav C Balan · Accepted Answer · 2017-02-25 18:47:21Z

2

You are not updating the attribute, do it using a callback with attr() method which holds the old value as the second argument.

$(document).ready(function() {
  $("#largeimage").click(function() {
    $(".container img").attr("src", function(i, src) {
      return src.replace("s120", "s400");
    });
  });
});

answered Feb 25, 2017 at 18:47

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kind user · Accepted Answer · 2017-02-25 18:51:19Z

0

Another approach - changing img src inside the attr function.

$(document).ready(function(){
  $("#largeimage").click(function(){
     var src = $(".container img").attr("src");
     $(".container img").attr("src", src.replace("s120","s400"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container center">
  <img src="https://2.bp.blogspot.com/-NwKHFcL48ZA/WJ2FANm2TXI/AAAAAAAAA6Y/hE-85KroGacBYy26mnEbkEGYFcnyWWv4gCLcB/s120/demo%2Bproduct%2Blipstik.jpg">
</div>
<p>
<button class="center" id="largeimage">Large Image to 400</button>
</p>

answered Feb 25, 2017 at 18:51

kind user

42k8 gold badges69 silver badges78 bronze badges

Collectives™ on Stack Overflow

jquery replace string in url images

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related