首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >当网页图片不存在时不显示叉叉,显示默认图片的方法,管用的很!

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

作者头像
崔文远TroyCui
发布于 2019-02-26 14:56:33
发布于 2019-02-26 14:56:33
2.8K0
举报
文章被收录于专栏:远在上海远在上海

有时候管理系统里面的产品图片没上传,或者因为网络原因传输过程中断了,图片没显示出来,就会显示一个叉叉,并且图片的占位符也不起作用了。昨晚上花了1个小时搜索、调试,验证了几种网络上的方法,最终有2种方法的确有效,鉴于代码优美的需要,我选择了如下一种。

前台

代码语言:javascript
复制
<img src="<%#Eval("ItemPhoto").ToString() == "" ? "/UploadFiles/ItemCode/nophoto.png" : Eval("ItemPhoto").ToString().Replace("original","middle")%>" alt="<%#Eval("ItemCode")%>" class="img-responsive center-block">

js代码

代码语言:javascript
复制
$(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的调用,我比较嫌麻烦。

前台

代码语言:javascript
复制
<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代码

代码语言:javascript
复制
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 删除
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档