当网页图片不存在时不显示叉叉，显示默认图片的方法，管用的很！
有时候管理系统里面的产品图片没上传，或者因为网络原因传输过程中断了，图片没显示出来，就会显示一个叉叉，并且图片的占位符也不起作用了。昨晚上花了1个小时搜索、调试，验证了几种网络上的方法，最终有2种方法的确有效，鉴于代码优美的需要，我选择了如下一种。
前台
<img src="<%#Eval("ItemPhoto").ToString() == "" ? "/UploadFiles/ItemCode/nophoto.png" : Eval("ItemPhoto").ToString().Replace("original","middle")%>" alt="<%#Eval("ItemCode")%>" class="img-responsive center-block">js代码
$(document).ready(function () {
$('.card img').each(function () {
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
this.src = '/UploadFiles/ItemCode/nophoto.png';
this.onerror = null;//控制不要一直跳动
}
});
});另一种，需要在img里面增加onerror的调用，我比较嫌麻烦。
前台
<img src="<%#Eval("ItemPhoto").ToString() == "" ? "/UploadFiles/ItemCode/nophoto.png" : Eval("ItemPhoto").ToString().Replace("original","middle")%>" alt="<%#Eval("ItemCode")%>" class="img-responsive center-block" onerror="nophoto()">js代码
function nophoto() {
var img = event.srcElement;
img.src = "/UploadFiles/ItemCode/nophoto.png";
img.onerror = null; //控制不要一直跳动
}这两种方法都使用到了img的onerror属性，这里也对html5的img充一下电：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016年6月29日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
