当网页图片不存在时不显示叉叉，显示默认图片的方法，管用的很！

有时候管理系统里面的产品图片没上传，或者因为网络原因传输过程中断了，图片没显示出来，就会显示一个叉叉，并且图片的占位符也不起作用了。昨晚上花了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充一下电：