jQuery img relative path / src using ~

Question

I am working on VS2010 asp.net MVC project and changing dynamically an image/icon with the following jQuery call.

<div class="icon-button"><img src="~/Images/Umark_Icon.png" class="image-class" /></div>


<script>
$(document).on("click", ".iconl-button", function () {
       $(this).find('img').attr("src", "~/Images/Mark_Icon.png");
 });
</script>

OR instead I also tried

$(this).html('<img src="~/Images/Mark_Icon.png" class="image-class"/>');

If image src or the whole image replaced with relative path with "~/image_path" it does not work with the tilde.

It works only with "../image_path".

It does not work with "../../image_path" which I believe, but not sure, is due to the image folder depth.

Finally, I want it to work work with the "~/" option which I believe is the most appropriate for the case.

Please any comments, suggestions and demos on the topic would be very helpful to me.

Thanks.

Answer 1

 var ImageURL = '<%=ResolveClientUrl("~/Images/Mark_Icon.png")%>';
 $(this).find('img').attr('src', ImageURL );

Answer 2

~/ is not a valid URL path. Paths either need to be absolute or relative URLs in order to function in an image tag. You have the following options to my knowledge:

/foo - relative to root of host

foo or ./foo - relative to current URL

//host.com/foo or protocol://host.com/foo - absolute URL

http://url.spec.whatwg.org/