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


相关推荐

  • python字符串的使用方法_python字符串常用函数

    python字符串的使用方法_python字符串常用函数python字符串常用方法find(sub[,start[,end]])在索引start和end之间查找字符串sub​找到,则返回最左端的索引值,未找到,则返回-1​start和end都可

    2022年7月28日
    6
  • 前端网页技术之 Vue

    前端网页技术之 Vue文章目录VueVue概念同类产品官网特点渐进式框架入门案例.html改造入门案例.htmlMVVM框架基础语法运算符operator方法methodsVue解析数据三种data值的写法高级用法:v-命令指令集双向绑定v-model闪现v-cloak判断v-if循环v-for事件v-on绑定v-bind小结Vue组件概述使用测试Vue路由概述使用步骤入门案例Vue的AjaxAjax概述Ajax原理axios测试常见错误Vue的生命周期lifecycle概述测试扩展:观察者设计模式HBuilde

    2022年6月17日
    48
  • navicat 15 mac激活码[最新免费获取]

    (navicat 15 mac激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~CIOU…

    2022年3月26日
    60
  • 基于php的微信公众平台开发入门实例

    基于php的微信公众平台开发入门实例作者 zbtree 这篇文章主要介绍了基于 php 的微信公众平台开发入门 实例分析了微信公众平台从注册 配置方法及接口代码的实现技巧 深入浅出 希望可以帮助大家快速入门 CSDN 学院开设了系列直播 微信公众号开发实战 即将直播 每周 1 小时 共计三周 独家体系 全程直播互动答疑 源码可以直接共享哦 查看 点我微信公众平台提供的接口很简单 先看看消息交互流程 说的通俗一些 用户使用微

    2025年11月21日
    4
  • 基于OpenCV3实现人脸识别(实践篇)[通俗易懂]

    基于OpenCV3实现人脸识别(实践篇)[通俗易懂]实践总结:首先了解做人脸识别的步骤 各个算法后面的原理 原理背后的相关知识的了解 人脸识别项目总遇到的问题由于篇幅原因,后面一篇写各个算法背后的原理,原理背后的相关知识的了解,人脸识别项目总遇到的问题首先感谢:https://blog.csdn.net/qq_37406130/article/details/78697244基于Opencv的人脸识别ht…

    2022年6月7日
    67
  • vscode连接力扣题库

    vscode连接力扣题库vscode连接力扣题库下载力扣插件回到力扣,点击题库,打开开发者工具(f12),点击网络,再次点击题库,点击标头,下滑找到cookie,复制cookie的值回到vscode,点击力扣图标,点击登录图标(如图),选择cookie登录,将刚刚复制的cookie值粘贴在这里即可…

    2025年8月12日
    4

发表回复

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

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