0

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.

Jace Rhea
  • 4,982
  • 4
  • 36
  • 55
Georgi
  • 287
  • 1
  • 6
  • 13
  • What is the intent of `~/`? Where is the resource relative to your current path? – Owen Allen Jan 02 '14 at 21:09
  • @Nucleon If I correctly understand your question the resource is "../../Images/Mark_Icon.png" relative to my current path. – Georgi Jan 02 '14 at 21:18
  • So to be clear, the URL that someone would see that snippet is it at something like http://yourdomain.com/foo/bar/ and the image is located at http://yourdomain.com/Images/Mark_Icon.png? Relative paths in the browser are based off URLs, not actual file paths. If my example URLs above are correct then "../../Images/Mark_Icon.png" is valid and will work. – Owen Allen Jan 02 '14 at 21:20
  • @Nucleon yes it does work, though when on the localhost the path is "../../Images/Mark_Icon.png" but when on the DEV server it changes to "../Images/Mark_Icon.png" and that is what I am trying to resolve. – Georgi Jan 02 '14 at 21:26

2 Answers2

1

~/ 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/

Owen Allen
  • 11,348
  • 9
  • 51
  • 63
0
 var ImageURL = '<%=ResolveClientUrl("~/Images/Mark_Icon.png")%>';
 $(this).find('img').attr('src', ImageURL );
Ani
  • 4,473
  • 4
  • 26
  • 31
  • I am sorry may be I was not clear enough, but I am looking for a jQuery solution, and more importantly no server calls that will lead to a post back. Thanks. – Georgi Jan 02 '14 at 21:13
  • thanks for the suggestion but it does not work in my case for some reason. – Georgi Jan 02 '14 at 21:38
  • What does it do ? What's the link that you get when you run this ? – Ani Jan 02 '14 at 21:42
  • It breaks in run-time somewhere ...elem.setAttribute( name, value + "" );... in the jquery-1.8.3.js and displays the following error message "htmlfile: Invalid argument." – Georgi Jan 02 '14 at 21:52
  • Try now...Updated answer – Ani Jan 02 '14 at 22:28
  • It gives the exact same error message and if I hit Continue button (to continue in debug mode) everything works accordingly but the picture does not change. – Georgi Jan 03 '14 at 14:45
  • When the picture doesn't change, what's the url it's poiting to at that time – Ani Jan 03 '14 at 14:45
  • That is what it is pointing to.<%=ResolveClientUrl("~/Images/Mark_Icon.png")%> – Georgi Jan 03 '14 at 14:56