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)
上一篇 2022年6月2日 下午5:36
下一篇 2022年6月2日 下午5:36


相关推荐

  • 网页上的文字不能复制怎么办_怎么复制网页上收费的文字

    网页上的文字不能复制怎么办_怎么复制网页上收费的文字网页上的文字不能复制怎么办?1,网页中嵌入了javascript语言,通过编程手段屏蔽了复制。  只要点击IE的“工具”→“Internet选项”菜单,进入“安全”标签页,选择“自定义级别”,将所有脚本全部禁用,然后按F5键刷新网页,这时你就会发现那些无法选取的文字可以选取了  在采集到了自己需要的内容后,一定要给脚本“解禁”,否则会影响到我们浏览网页。  2,有些网站为了防止别人使用…

    2022年10月13日
    2
  • 使用Diffie-Hellman算法(非对称加密算法)得到对称加密需要的秘钥

    使用Diffie-Hellman算法(非对称加密算法)得到对称加密需要的秘钥目录 0 摘要 1 概述 2 Diffie Hellman 算法原理 2 1Diffie Hellman 算法原理 2 2Diffie Hellman 算法的优缺点转载自原文在原文基础上优化了一下 加上注释 更好读懂 0 摘要非对称加密算法又称公开密钥加密算法 非对称加密是相对于对称加密而言的 对称加密指的是通信双方使用的密钥是一致的 而非对称加密就是算法使用的密钥不一致 非对称加密的好处是当通信双方没有事先协商密钥的情况下也能进行安全通信 而在互联网普及的今天 很多通信双方往往在事先是无法协商好密钥的

    2026年3月16日
    2
  • 国内NFT平台及玩法一览[通俗易懂]

    国内NFT平台及玩法一览[通俗易懂]2021年被称为NFT的“元年”,互联网巨头、各大企业、艺术家、明星纷纷入局NFT,屡创新高的NFT价格更是让其成为大众关注焦点。此推出NFT系列专题研究,盘点和总结NFT的发行市场、平台背景、投融资状况、市场热点、政策监管等相关内容,帮助读者对NFT市场有更全面地了解。随着国外NFT风潮的火热,国内风潮总算是姗姗来迟,入局NFT的选手也是越来越多。NFT发行平台是为NFT提供发行、交易等服务的平台,根据平台的所在地,NFT发行平台能够被分为国内和国外两个市场。本文主要对于国内NFT发行平台.

    2022年5月14日
    106
  • TP50 TP90 TP99 TP999 详细说明

    TP50 TP90 TP99 TP999 详细说明本文是根据自己的总结和网络总结得出 1 TP 指标说明 TP 指标 指在一个时间段内 统计该方法每次调用所消耗的时间 并将这些时间按从小到大的顺序进行排序 并取出结果为 总次数 指标数 对应 TP 指标的值 在取出排序好的时间 TP50 TP90 TP99 TP999 计算方式一致 TP90 TP99 TP999 则对方法性能要求很高 2 国外资料 在参考文章中的

    2025年10月21日
    6
  • Memcached和Redis区别

    Memcached和Redis区别多线程 锁 memcached vs 单线程 多路 IO 复用 Redis 与 Memcache 三点不同 支持多数据类型 支持持久化 单线程 多路 IO 复用

    2026年3月16日
    2
  • matlab灰度最大值和最小值_matlab灰度直方图

    matlab灰度最大值和最小值_matlab灰度直方图这里有两个版本的泛洪填充算法:第一个,更简单的一个包含两个未定义的变量,但这是一个工作版本:importnumpyasnpimportscipyasspimportscipy.ndimagedefflood_fill(test_array,h_max=255):input_array=np.copy(test_array)el=sp.ndimage.generate_bin…

    2025年11月4日
    6

发表回复

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

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