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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 软阈值 (Soft Thresholding)函数解读

    软阈值 (Soft Thresholding)函数解读版权声明:本文为博主原创文章,遵循CC4.0by-sa版权协议,转载请附上原文出处链接和本声明。…

    2022年6月5日
    35
  • C语言实现选择排序

    C语言实现选择排序选择排序是在每一轮比较中不是每当a[i]<a[j]时候就交换,而是用一个变量k记下其中较小的元素的下标值,在a[i]与a[i+1]~a[n]全部进行比较后,只将a[i]与a[i+1]~a[n]中最小的值进行交换,为此每一轮只需要将a[i]与a[k]的值进行交换即可。设有n个数据存储到从a[0]~a[n+1]的n个数组元素中,则选择排序过程分为如下n-1步骤:第一步:在第1~n个数中找出最小者,然后与第一个数进行比较,前1个数排好序第二步:在第2~n个数中找出最小者,然后与第二个数进行交换,

    2022年6月25日
    30
  • python Fake 安装使用

    python Fake 安装使用安装Faker使用pip安装pipinstallFaker或者去Faker的PyPI页面下载Wheel或者Source文件进行安装:基本用法fromfakerimportFaker#1fake=Faker()#2fake.name()#3DonnaKellyfake.address()#4519DonnaRiverPortNatalie,SD87384从faker

    2022年10月16日
    2
  • 关于大学计算机相关专业学习路线的见解与分析

    关于大学计算机相关专业学习路线的见解与分析谨以此文献给仍然迷失在大学生活中的计算机专业学子!!!不管你是如何选择了这门专业,我想告诉你的是这是一个很深的领域,没有热爱不如尽早转行。根据百度百科计算机科学与技术专业(以下简称计算机专业)给出的描述,该专业的主干课程有算法、数据结构、操作系统、编译原理、计算机组成原理、计算机体系结构、计算机网络(划重点,这些都是专业基础课,其中的任意一门拿出来都够研究一生的,虽然大学的教育基本上都是讲…

    2022年5月3日
    50
  • paddle深度学习基础之训练调试与优化

    paddle深度学习基础之训练调试与优化上一节咱们讨论了四种不同的优化算法,这一节,咱们讨论训练过程中的优化问题。本次代码修改模型全是在卷积神经网络

    2025年9月28日
    2
  • 一款新型的智能家居WiFi选择方案——SimpleWiFi在无线智能家居中的应用

    一款新型的智能家居WiFi选择方案——SimpleWiFi在无线智能家居中的应用

    2021年9月8日
    58

发表回复

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

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