img图片加载失败?

img图片加载失败?问题场景在工作中经常会使用标签进行图片展示,但是经常有图片加载失败的情况发生(图片地址不存在、图片已经删除等)。场景再现图片加载失败时的用户体验是很不好的。虽然标签有alt属性可以展示文本,但是用户体验依然差。代码:<imgalt="头像"src="$

大家好,又见面了,我是你们的朋友全栈君。

问题场景

在工作中经常会使用< img >标签进行图片展示,但是经常有图片加载失败的情况发生(图片地址不存在、图片已经删除等)。

场景再现

图片加载失败时的用户体验是很不好的。虽然< img >标签有alt属性可以展示文本,但是用户体验依然差。
代码:

<img alt="头像" src="${fProductConsult.consumerAvatar!}" />

效果:
alt属性

解决方法

使用onerror事件

<img alt="头像" src="${fProductConsult.consumerAvatar!}"  onerror = "this.null;this.src='${request.contextPath}/img/img-no.jpg'" />

效果:
使用onerror属性

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/137051.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java string转换为integer(Java int最大值)

    String转换为int型//convertstr(String)toi(int)Stringstr;inti=Integer.parseInt(str);int型转换为String//converi(int)tostr(String)inti;Stringstr=i.toString();//converti(int)toj(Integer)inti;Inte

  • debounce与throttle区别

    debounce与throttle区别在2011年,Twitter网站曾爆出一个问题:在主页往下滚动时,页面会变得缓慢以致没有响应。JohnResig发表了一篇文章《ablogpostabouttheproblem》指出直接在scroll事件上面绑定高消耗的事件是一个多么愚蠢的想法。现在项目中大家都会对类似的scroll或者resize事件都进行了节流控制,下述是我们经常用到,也是《JavaScript高级程序设计》-J

  • 传真服务器的定义与选购

    传真服务器的定义与选购 AOFAX热点:传真服务器的定义与选购服务信息卡:联系人:朱成军服务热线:15920885998 商务QQ:909075483.一、传真服务器和传真系统传真服务器定义:所谓传真服务器,就是为企业内部所有员工提供电脑传真收发服务的设备,能够长期脱离其他电脑独立工作,是传真服务器的必要条件。传真服务器由传真软件、传真卡、工控机等组成。传真系统:传真服务器在某些场合也

  • cmd命令 拷贝某文件夹及其子文件夹文件到其它文件夹

    cmd命令 拷贝某文件夹及其子文件夹文件到其它文件夹

  • 正则替换括号但保留内容(常用的正则表达式)

    正则表达式保留部分内容替换需求:把trim(ABC)替换成trim(replace(ABC,char(9),”)需要把ABC保留不变,替换其它的。实现:trim\(([^).]*)\)替换成trim\(replace\($1,char\(9\),”\)在查找的时候用括号括起来的代表一部分,在替换的时候可以用$1,$2…引用。注意:有写编…

  • Petalinux系列——0.在Docker里玩转PetaLinux

    Petalinux系列——0.在Docker里玩转PetaLinux在Docker里玩转PetaLinux来自https://github.com/alexhegit/https://mp.weixin.qq.com/s/spaq_Sv1giraeIJgsKDQYA简介PetaLinuxPetaLinux是Xilinx推出的针对ZynqSoc,ZynqMPSOC嵌入式开发板的基于Yocto二次封装的LinuxBSP构建工具,支持Ubuntu…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号