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

图片加载失败后显示默认图片加载失败后显示默认图:<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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Android Studio实现多媒体播放器,音乐视频一体化

    Android Studio实现多媒体播放器,音乐视频一体化这次的网络版音乐视频播放器是在前面讲到的音乐播放器项目(AndroidStudio如何实现音乐播放器)基础上,将音乐文件与项目文件独立开,放在服务器的文件夹里面进行访问,除此之外还添加了视频播放器功能。本次项目综合了Android几乎所有知识,可以让大家熟练掌握Android程序开发的基本技术,涉及Android基础知识、UI界面、数据存储、四大组件、网络编程、高级编程、多媒体播放器、适配器配置等。大家熟练掌握可以对以后的Android开发有非常大的帮助。

    2022年6月26日
    48
  • STM32驱动LCD1602程序(调试已成功)「建议收藏」

    STM32驱动LCD1602程序(调试已成功)「建议收藏」IO接线:RSPA8RWPB6EPB7LCD1602_IOPB8-PB15所有的口都配置成开漏输出,并且所有的口都通过10k电阻上拉至5V,部分电路图如下:程序代码LCD1602.C#include”lcd1602.h”voidLCD1602_GPIO_Init_Out()//LCD1602端口初始化,配置为输出{ GPIO_InitTypeDefGPIO_InitStructrue; RCC_APB2PeriphClockCmd(LCD1602_Timer_GPI

    2022年7月16日
    22
  • 此网站无法提供安全连接(客户端和服务器不支持一般 SSL 协议版本或加密套件。)[通俗易懂]

    此网站无法提供安全连接(客户端和服务器不支持一般 SSL 协议版本或加密套件。)[通俗易懂]最近访问一部分网站时,出现如下图所示“此网站无法提供案例连接,客户端和服务器不支持一般SSL协议版本或加密套件”的问题。注意这里显示了非常关键的一句话,xxx使用了不受支持的协议。从这句话入手,很快就查到了原因。原来是网站不支持HTTPS协议,我将HTTPS改为HTTP访问,问题得到解决。…

    2022年5月5日
    222
  • mutual information loss_munication

    mutual information loss_munication今天挺paperreading的时候,听到了最大化互信息,还不清楚互信息是个什么东东,google了一下,从http://en.wikipedia.org/wiki/Mutual_information摘过来了:    DefinitionofmutualinformationFormally,themutualinformationoftwod

    2022年9月17日
    4
  • InnoDB数据库隔离级别

    InnoDB数据库隔离级别事务隔离级别分为四种(级别递减):1、Serializable(串行化):最严格的级别,事务串行执行,资源消耗最大;2、REPEATABLEREAD(重复读):保证了一个事务不会修改已经由另一个事务读取但未提交(回滚)的数据。避免了“脏读取”和“不可重复读取”的情况,但不能避免“幻读”,但是带来了更多的性能损失。3、READCOMMITTED(提交读):大多数主流数据库的默认事…

    2022年5月18日
    30
  • matlabfprintf用法_matlab中compose函数

    matlabfprintf用法_matlab中compose函数fprintf函数的运用(组图)08-19栏目:技术TAG:fprintffprintffprintf()用于文件操作#includeintfprintf(FILE*stream,constchar*format,…);copyrightwww.jhua.orgfprintf()函数根据指定的format(格式)发送信息(参数)到由stream(流)指定的文件.因此fpr…

    2022年10月9日
    4

发表回复

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

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