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

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


相关推荐

  • 打赏功能的实现

    打赏功能的实现

    2021年11月4日
    45
  • 如何卸载赛门铁克symantec,ivanti[通俗易懂]

    如何卸载赛门铁克symantec,ivanti[通俗易懂]1、会安装这个软件的公司大概率不会改密码,默认卸载密码就是:symantec2、如果不幸改了密码,用下面这个软件可以卸载大部分功能链接:https://pan.baidu.com/s/14evQQ1sHh2FCmYjtBBmMqw提取码:luna

    2022年5月2日
    279
  • 已成功刷新dns解析缓存后怎么操作_刷新dns缓存的命令

    已成功刷新dns解析缓存后怎么操作_刷新dns缓存的命令步骤一、首先按住键盘win+R组合键,打开了一个运行窗口,之后在运行窗口上输入“CMD”命令,执行该命令即可打开命令提示符窗口了。步骤二、然后在命令提示符上线查看下你的电脑上的dns缓存的全部信息,输入“ipconfig/displaydns”即可查询dns缓存信息了。之后在输入“ipconfig/flushdns”命令敲回车键即可将你本机上的dns缓存清空了。当然如果你不信的话,可以重新输入“ipconfig/displaydns”查询dnd缓存就能知道是否清空了本机dns缓存信息了。运行:ip

    2025年5月22日
    0
  • Navicat mysql报错 1142 – SELECT command denied to user ‘xxx‘@‘localhost‘ for table ‘user‘

    Navicat mysql报错 1142 – SELECT command denied to user ‘xxx‘@‘localhost‘ for table ‘user‘话我就撂这儿了,只要你认真看完,你就能解决。困了我一天一夜的问题终于解决了,问题也不知道是怎么产生的,点击“用户”或者修改“information_schema”的值就会提示错误,似乎是因为权限不足,错误入下图。首先你要知道数据库的用户是怎么回事。每个数据库都有账号密码,连接特定的数据库需要对应的账号密码,这个很容易理解,PHP里的mysqli_connect你们也用的多了。主机上的…

    2022年10月1日
    0
  • 正確使用 SetCapture ReleaseCapture [譯]「建议收藏」

    正確使用 SetCapture ReleaseCapture [譯]「建议收藏」本文描述瞭如何正確處理自定義窗口和控件中的鼠標捕獲操作。原文鏈接: http://www.codeproject.com/Tips/127813/Using-SetCapture…correctly.aspx原作者: pasztorpisti轉載請註明出處:http://www.imoldman.com/2010/11/30/using-setcaptu…ture-corre

    2022年5月24日
    31
  • YUI Compressor完成代码混淆示例「建议收藏」

    YUI Compressor完成代码混淆示例「建议收藏」YUICompressor相关信息官网GitHub地址混淆单个js一般命令,java-jaryuicompressor-x.y.z.jarmyfile.js-omyfile-min.js若出现编码错误,就加上编码参数,比如你的文件的编码是utf-8编码,则命令如下,java-jaryuicompressor-x.y.z.jarmyfile.js-omyfile-min.j

    2022年7月18日
    12

发表回复

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

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