MVC5 Change image src in jquery script

Question

I have an image with a hard-coded src in my html file, which I need to change when a button is clicked. The relative path I am using is ~/Content/Images/img.png, which displays fine. However, when a button is clicked, I have some jquery code intended to change that image, like such.

$("#response-img-" + (i + 1)).attr('src', img2.png);

This shows the default placeholder image, not my image. Any ideas how I can get this image to change?

hmm, that didn't seem to do it. I tried both hard-coding that and setting it in a variable — user1145998
– user1145998, Commented Mar 24, 2015 at 20:12
<img id="response-img-1.png" src="~/Content/Images/img1" alt="img goes here"> — user1145998
– user1145998, Commented Mar 24, 2015 at 20:22
var index = (i+1); $("#response-img-" + index).attr('src', "img2.png"); try this. — Banik
– Banik, Commented Mar 24, 2015 at 20:23

Judge Bread · Accepted Answer · 2015-03-24 21:42:50Z

2

Personally I would make it simple by storing the image url on the page in a hidden field or using a data-* attribute on the image itself. Then use JQuery to replace it.

<input type="hidden" value="~/Content/images/ios-startup-image-landscape.png" name="dynamicImageUrl" />
<img id="replaceMe" src="~/Content/images/ios-startup-image-portrait.png" />

 var imgUrl = $('input[name=dynamicImageUrl]').val();
 $("#replaceMe").attr('src', imgUrl);

answered Mar 24, 2015 at 21:42

Judge Bread

5011 gold badge4 silver badges13 bronze badges

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

Comments

Sunil Kumawat · Accepted Answer · 2015-03-25 08:05:15Z

0

Try this:

<input type="button" id="yourbutton" value="ClickMe"  onclick="buttonfunction(this)"/>


function buttonfunction(obj) {
    $("#response-img-").attr('src', obj);
}

answered Mar 25, 2015 at 8:05

Sunil Kumawat

4110 bronze badges

Collectives™ on Stack Overflow

MVC5 Change image src in jquery script

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