我的网站包含以下代码:
<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>
原始图像显示效果很好,但是当我点击“查看更多”按钮时,我可以看到列表项是动态添加的,但图像显示“alt”文本n / a而不是“man1.jpg”图像。那么我做错了什么? 我基本上尝试复制谷歌的图像搜索行为,只显示数据库中的一些图像,然后根据要求显示更多。
答案 0 :(得分:7)
~/Images/man1.jpg
是服务器端相对路径。如果要在客户端添加节点,则需要使用/Images/man1.jpg
,假设Images文件夹位于站点的根文件夹中。
答案 1 :(得分:5)
相对路径:
<img src="~/Images/man1.jpg"
应该在服务器上“解析”,如果你按原样在客户端上添加它,路径就无效。
答案 2 :(得分:0)
为什么您的网址包含~
?它不应该使用某些特定于Linux的路径,因为它不是URL。它应该是从Web服务器而不是文件系统到达它的路径。
<!-- Relative -->
<img src="./Images/man1.jpg" alt="n/a"/>
<!-- Absolute -->
<img src="/Path/to/my/directory/Images/man1.jpg" alt="n/a"/>