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属性

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 微信小程序 springwebsocket 报错: Error during WebSocket handshak 403

    微信小程序 springwebsocket 报错: Error during WebSocket handshak 403

    2022年3月13日
    58
  • 2022最新Kong插件开发教程[通俗易懂]

    2022最新Kong插件开发教程[通俗易懂]Kong网关插件开发教程

    2022年6月26日
    153
  • Java 中是如何获取 IP 属地的[通俗易懂]

    Java 中是如何获取 IP 属地的[通俗易懂]细心的小伙伴可能会发现,抖音新上线了IP属地的功能,小伙伴在发表动态、发表评论以及聊天的时候,都会显示自己的IP属地信息这里有三个名词,分别是X-Forwarded-For:一个HTTP扩展头部,主要是为了让Web服务器获取访问用户的真实IP地址。每个IP地址,每个值通过逗号+空格分开,最左边是最原始客户端的IP地址,中间如果有多层代理,每⼀层代理会将连接它的客户端IP追加在X-Forwarded-For右边。X-Real-IP:一般只记录真实发出请求的客户端IP

    2022年10月21日
    3
  • gcc编译链中i686和x86-64有什么区别?

    gcc编译链中i686和x86-64有什么区别?个人记录,请不要当成事实!!暂时理解成:来自网络1、i686和x86_64有什么不同?2、linux系统中的i386/i686和x86_64有什么区别回答i386对应的是32位系统、而i686是i386的一个子集,i686仅对应P6及以上级别的CPU,i386则广泛适用于80386以上的各种CPU;x86_64主要是64位系统。i686在pentun…

    2022年6月7日
    89
  • CRC16 的生成及校验原理「建议收藏」

    CRC16 的生成及校验原理「建议收藏」参考:https://blog.csdn.net/niepangu/article/details/45499383计算CRC的过程,就是用一个特殊的“除法”,来得到余数,这个余数就是CRC。&#1

    2022年8月4日
    6
  • TB6612FNG 驱动学习笔记

    TB6612FNG是东芝半导体公司生产的一款直流电机驱动器件,它具有大电流MOSFET-H桥结构,双通道电路输出,可同时驱动2个电机。TB6612FNG每通道输出最高1.2A的连续驱动电流,启动峰值电流达2A/3.2A(连续脉冲/单脉冲);4种电机控制模式:正转/反转/制动/停止;PWM支持频率高达100kHz;待机状态;片内低压检测电路与热停机保护电路;工作温度:-20~85℃;SSOP…

    2022年4月7日
    63

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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