图片加载失败后显示默认图片

图片加载失败后显示默认图片加载失败后显示默认图:<img:src=”`${img}.png`”onerror=”javascript:this.src=’logo.png'”/>也可以在图片加载失败后弹出提示:<imgsrc=”image.gif”onerror=”alert(‘图片不能被加载。’)”>扩展小知:img除了支持加载失败的回调,也支持加载中断及加载成功的回调。用法:onabort:<imgsrc=”image_w3default.gif”onabort

大家好,又见面了,我是你们的朋友全栈君。

加载失败后显示默认图:

<img :src="`${ 
     img}.png`" onerror="javascript:this.src='logo.png'"/>

也可以在图片加载失败后弹出提示:

<img src="image.gif" onerror="alert('图片不能被加载。')">

扩展小知:
img除了支持加载失败的回调,也支持加载中断及加载成功的回调。
在这里插入图片描述

用法

onabort:

<img src="image_w3default.gif" onabort="abortImage()">

function abortImage(){ 
   
    alert('Error: 图像加载终止!')
}

onload:

<img src="w3javascript.gif" onload="loadImage()">

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

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

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


相关推荐

  • mac 查看redis 版本[通俗易懂]

    mac 查看redis 版本[通俗易懂]redis-server-v

    2022年5月1日
    181
  • SchedulerFactoryBean初始化监听

    SchedulerFactoryBean初始化监听SchedulerFactoryBean初始化监听今天碰到一个问题,使用的是Quartz动态控制定时器的运行,功能已经完善,但是每次上线定时项目的时候,总要重启,一重启,所有定时任务自动就停止了,就会跟数据库对应的定时器状态不一致,在网上找了半天,找到了关于SchedulerFactoryBean初始化监听的东西,网上的文章大部分是SchedulerFactoryBean初始化解析,全部去研究…

    2022年5月24日
    57
  • java jasypt_Jasypt「建议收藏」

    java jasypt_Jasypt「建议收藏」软件简介Jasypt这个Java类包为开发人员提供一种简单的方式来为项目增加加密功能,包括:密码Digest认证,文本和对象加密,集成hibernate,SpringSecurity(Acegi)来增强密码管理。Jasypt开发团队推出了Java加密工具Jasypt1.4,它可与SpringFramework、Hibernate和AcegiSecurity集成。与项目有关的一位开发者表示,Ja…

    2022年9月26日
    3
  • 抓包神器之Charles,常用功能都在这里了[通俗易懂]

    抓包神器之Charles,常用功能都在这里了[通俗易懂]我们在开发网站项目的时候,我们可以通过浏览器的debug模式来看request以及response的数据,那么如果我们开发移动端项目没有网页呢?如何抓取数据呢?前几天有个做服务端的师弟跟我说他不用抓包工具,遇到问题直接debug代码,那我问他,如果线上服务的话,你怎么调?在实际项目中,没有遇到跟客户端相互扯皮的事情吗?我觉得很正常啊,客户端说他没问题,服务端也说他没问题,到…

    2022年4月30日
    137
  • stp常见故障解决_解决端口占用问题

    stp常见故障解决_解决端口占用问题STP故障01-STP端口问题

    2022年4月21日
    142
  • MQ学习笔记

    MQ学习笔记一、为什么要使用MQ?其实这里要讲的就是使用MQ的好处,MQ的的使用场景有很多,但是比较核心的有3个:解耦、异步、削峰1. 解耦例如:A系统要发送数据到B、C、D三个系统,通过接口调用发送。假如现在又添加了一个E系统,也要数据,A系统需要修改;B系统说我现在不需要这个数据了,A系统还是要修改。这种情况下,A系统的维护者肯定很崩溃。其实这个调用是不需要直接同步调用接口的,如…

    2022年6月13日
    70

发表回复

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

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