My website contains the following code:
<ul class="thumbnails1">
<li>
<img src="~/Images/man1.jpg" alt="n/a"/>
</li>
</ul>
<input type="button" value="See More" onclick="OnSeeMore()"/>
<script type="text/javascript">
function OnSeeMore() {
$('.thumbnails1').prepend('<li><img src="~/Images/man1.jpg" alt="n/a"/></li>');
}
</script>
The original image appears well, but when i click "See More" button, I can see the list item is dynamically added, but the image shows the "alt" text n/a instead of the "man1.jpg" image. so what am I doing wrong? I basically try to copy google's image search behavior, by showing only some of the images in the DB and then show more upon request.
My website contains the following code:
<ul class="thumbnails1">
<li>
<img src="~/Images/man1.jpg" alt="n/a"/>
</li>
</ul>
<input type="button" value="See More" onclick="OnSeeMore()"/>
<script type="text/javascript">
function OnSeeMore() {
$('.thumbnails1').prepend('<li><img src="~/Images/man1.jpg" alt="n/a"/></li>');
}
</script>
The original image appears well, but when i click "See More" button, I can see the list item is dynamically added, but the image shows the "alt" text n/a instead of the "man1.jpg" image. so what am I doing wrong? I basically try to copy google's image search behavior, by showing only some of the images in the DB and then show more upon request.
Share Improve this question edited Nov 13, 2012 at 19:50 Babak Naffas 12.6k3 gold badges35 silver badges51 bronze badges asked Nov 13, 2012 at 19:44 user1595443user1595443 2273 silver badges12 bronze badges 2- Are any network requests made and does it try to load the right image? – Matt Zeunert Commented Nov 13, 2012 at 19:47
- are you prepending the images or appending the images. – defau1t Commented Nov 13, 2012 at 19:48
3 Answers
Reset to default 7~/Images/man1.jpg is a server-side relative path. If you are adding the node on the client side, you need to use /Images/man1.jpg assuming the Images folder is in the root folder for your site.
The relative path:
<img src="~/Images/man1.jpg"
Should be "resolved" on the server, if you add it on the client as is, the path is invalid.
Why does your URL include a ~? It should not use some linux specifc path since that is not a URL. It should be the path to get to it from the webserver, not the file system.
<!-- Relative -->
<img src="./Images/man1.jpg" alt="n/a"/>
<!-- Absolute -->
<img src="/Path/to/my/directory/Images/man1.jpg" alt="n/a"/>