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)
blank

相关推荐

  • js删除数组中指定元素并返回剩下的_js查找数组元素的下标

    js删除数组中指定元素并返回剩下的_js查找数组元素的下标Array.prototype.remove=function(dx){ if(isNaN(dx)||dx&gt;this.length){ returnfalse; } for(vari=0,n=0;i&lt;this.length;i++){ if(this[i]!=this[dx]){ …

  • leetcode-124. 二叉树中的最大路径和(树形dp)

    leetcode-124. 二叉树中的最大路径和(树形dp)原题链接路径 被定义为一条从树中任意节点出发,沿父节点-子节点连接,达到任意节点的序列。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点,且不一定经过根节点。路径和 是路径中各节点值的总和。给你一个二叉树的根节点 root ,返回其 最大路径和 。示例 1:输入:root = [1,2,3]输出:6解释:最优路径是 2 -> 1 -> 3 ,路径和为 2 + 1 + 3 = 6示例 2:输入:root = [-10,9,20,null,null,1

  • 后台管理系统界面_用户界面管理系统

    后台管理系统界面_用户界面管理系统后台界面也可以很酷!31个高大上的后台管理系统模版1.inspiniaDemo2.ThinAdminTemplateDemo&Download3.FreshUI–PremiumWebAppandAdminTemplateDemo&Download4.Clip-One–Bootstrap3Respo…

  • NFV基础技术_零基础

    NFV基础技术_零基础网络虚拟化技术,即用软件来安装、控制、操作那些运行在通用硬件上的网络功能,融合了云和虚拟化技术,使得新一代网络业务拥有更好的伸缩性和自动化能力。这些新涌现的技术经常被不加区分地称为NFV(网络功能虚拟化)和SDN(软件定义网络),虽然二者有逐渐融合之势,但二者的初衷和架构并不相同:SDN起源于园区网,发展于数据中心,目的是将控制平面和转发平面分离,通过集中化的控制平面能够灵活定义网络行为。N…

  • 回发或回调参数无效。在配置中使用 <pages enableEventValidation=”true”/> 或在页面中使用 <%@ Page EnableEventValidation=”true”

    回发或回调参数无效。在配置中使用 <pages enableEventValidation=”true”/> 或在页面中使用 <%@ Page EnableEventValidation=”true”回发或回调参数无效。在配置中使用或在页面中使用启用了事件验证。出于安全目的,此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的,则使用ClientScriptManager.RegisterForEventValidation方法来注册回发或回调数据以进行验证。这两天写程序总是遇到相似的程序在不同页面,出现不一样的结果。以下是

  • String与StringBuffer的区别

    String与StringBuffer的区别String与StringBuffer的区别简单地说,就是一个变量和常量的关系。StringBuffer对象的内容可以修改;而String对象一旦产生后就不可以被修改,重新赋值其实是两个对象。StringBuffer的内部实现方式和String不同,StringBuffer在进行字符串处理时,不生成新的对象,在内存使用上要优于String类。所以在实际使用时,如果经常需要对一个字符串进行修改,例如插入、删除等操作,使用StringBuffer要更加适合一些。String:在String类中没有用来改变已有字

发表回复

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

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