- N +

图片加载失败时渲染默认图片

原标题:图片加载失败时渲染默认图片

导读:

当获取后台图片,获取不到的时候,直接不显示图片,效果图如下:// 直接获取后台图片<img src="<shiro:princip...

文章目录 [+]

当获取后台图片,获取不到的时候,直接不显示图片,效果图如下:

// 直接获取后台图片
<img src="<shiro:principal property="avatarPath"/>"  style="width: 100%;height: 100%;"  alt="">

image.png

需求:当用户获取不到后台图片的时候,或用户未上传的时候,显示一个默认图像在上图红色框框内,代码如下:

//  onerror 当获取图片失败的时候,才显示
<img src="<shiro:principal property="avatarPath"/>"  onerror="this.src='${ctxStatic}/images/long2017/ren.png'" style="width: 100%;height: 100%;"  alt="">

效果图如下:

image.png

js方法:

// 监听图片是否加载成功
document.addEventListener("error", function (e) {
    var elem = e.target;
    if (elem.tagName.toLowerCase() === 'img') {
        elem.src = '${ctxStatic}/images/protection/uploadLogo.png';
    }
}, true);


有好的文章希望我们帮助分享和推广,猛戳这里我要投稿

3

0
返回列表
上一篇:
下一篇:

发表评论中国互联网举报中心

快捷回复:

验证码

    评论列表 (暂无评论,共320人参与)参与讨论

    还没有评论,来说两句吧...