Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >图片加载失败后显示默认图片

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

作者头像
全栈程序员站长
发布于 2022-09-03 05:37:18
发布于 2022-09-03 05:37:18
3.9K00
代码可运行
举报
运行总次数:0
代码可运行

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

加载失败后显示默认图:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<img :src="`${ 
     img}.png`" onerror="javascript:this.src='logo.png'"/>

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<img src="image.gif" onerror="alert('图片不能被加载。')">

扩展小知: img除了支持加载失败的回调,也支持加载中断及加载成功的回调。

用法

onabort:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<img src="image_w3default.gif" onabort="abortImage()">

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

onload:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<img src="w3javascript.gif" onload="loadImage()">

function loadImage(){ 
   
alert("图片加载完成");
}

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年5月2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
一起详析“图片预加载”
HTML5学堂:2014年年初的时候,曾经在自己的博客“独行冰海”里写过关于图片预加载和懒加载的博文,当时的文章当中没有写什么关于预载的代码范例,当前打算把预载和懒载分开,讲解的再详细一些。本文主要讲解了图片预载是什么,为何使用预加载,使用预加载的好处以及具体的代码实现。 图片预加载是什么 让浏览区先显示其他的图片(一般使用LOGO)给浏览者看,等图片加载完了之后,再将图片显示。 还有一种更为常见的预载,就是我们随处可见的loading条~~~在我们等待着loading条走完时,内容已经开始加载了~! 为何
HTML5学堂
2018/03/12
4.7K0
JavaScript设计模式--代理模式
代理模式:为一个对象提供一个代用品或占位符,以便控制对它的访问。 代理分为:保护代理和虚拟代理 保护代理:用于控制不同权限的对象对目标对象的访问,在JavaScript中很难判断谁访问了某个对象,所以保护代理很难实现。
奋飛
2019/08/15
4630
Javascript权威指南学习总结
1. 函数的定义总是覆盖变量的定义 function f(){     alert( 1111 ); } var f = 1; alert( f ); 此时输出的是1111 2. 函数变量的作用域不管定义在函数体内任何地方,都将是作用于整个函数体内 var x = 1; function f(){     alert( x );     var x = 2; } f(); 输出undefine,JS变量是在预编译期定义的,所以一开始全局变量x 和 局部变量x都已经被解析,函数体内此时的x的值是undefi
wangxl
2018/03/09
7690
图片加载失败替换图片解决方案
图片加载失败在不同浏览器表现有差异,比如google可能会一片空白、img的宽高是0*0,ie会在图片位置会出现一个碎片图标,火狐会显示一个边框像这样:
全栈程序员站长
2022/09/05
2.9K0
图片加载失败替换图片解决方案
vue图片加载失败默认图片[通俗易懂]
1,img是个比较特殊的标签,和video一样具有被替代性,所有当图片加载成功时,原先定义的伪类会失去作用不提示。
全栈程序员站长
2022/09/05
2.5K0
vue图片加载失败默认图片[通俗易懂]
elementUI el-image图片加载失败解决[通俗易懂]
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/144786.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/26
5.6K0
elementUI el-image图片加载失败解决[通俗易懂]
网页中默认图片的几种解决方式
现在网页中图片随处可见,但避免不了有时会出现图片资源失败的情况,在谷歌浏览器中就会显示这样
桃翁
2018/12/06
2.5K0
网页中默认图片的几种解决方式
把网站已失效图片改为指定的图片的方法
有的人可能会考虑使用图床,但找一个稳定的图床是真心不容易啊!如果图床gg了,网站全是报错,不仅影响seo,对用户也不友好。
PHP开发工程师
2021/05/05
8000
微信小程序处理图片加载失败显示默认图片
微信小程序image组件有个binderror事件专门用来处理图片加载失败的问题,我们只需要传个下标去获取相应的图片位置
明知山
2020/09/03
2.4K0
图片加载失败的正确处理[通俗易懂]
对于这样一段代码来讲,如果该图片加载成功,那么界面上会显示图片,如果由于一些原因导致图片加载失败,会出现这样的图标。
全栈程序员站长
2022/08/23
2.6K0
图片加载失败的正确处理[通俗易懂]
让Web页面中的编辑器支持黏贴或直接拖拽来添加图片「建议收藏」
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/107088.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/04
6100
图片懒加载
Vue实现一个图片懒加载插件 Vue.use()、Vue.direction、Vue图片懒加载插件实现
达达前端
2019/07/22
2K0
实现图片懒加载的三种方式(前端路由懒加载原理)
图片懒加载就是鼠标滑动到哪里,图片加载到哪里。总的来说,一般页面打开,会同时加载页面所有的图片,如果页面的图片请求太多会造成很卡很慢的现象,为了避免这一现象,利用懒加载图片的方法,提高性能(典型:淘宝)
全栈程序员站长
2022/07/31
2K0
实现图片懒加载的三种方式(前端路由懒加载原理)
img图片加载失败的处理
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/145961.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/29
2.4K0
js 图片加载失败处理方法「建议收藏」
个人github:https://github.com/qiilee 欢迎follow
全栈程序员站长
2022/09/05
6.1K0
js 图片加载失败处理方法「建议收藏」
img图片加载失败默认图片「建议收藏」
转载于:https://www.cnblogs.com/techliang666/p/8876842.html
全栈程序员站长
2022/09/01
8780
html错误(一) Stack Overflow at line:0 IE下解决方案
一 今天用IE测试发现一个很奇葩的问题:代码没有什么问题,但是在浏览器中会自动弹出一个错误
全栈程序员站长
2022/09/14
5890
html错误(一) Stack Overflow at line:0 IE下解决方案
图片懒加载原理及实现(java懒加载原理)
懒加载是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不是一次性加载所有图片,当需要显示时,再发送图片请求,避免打开网页时加载过多资源。 当一个网站的加载图片过多时就需要懒加载的协助,页面图片多时,在首次载入时一次性加载会耗费时间长,使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。 如下图:
全栈程序员站长
2022/08/01
1.9K0
图片懒加载原理及实现(java懒加载原理)
图片加载失败占位符[通俗易懂]
当网络不佳加载图片时会出现加载失败或者延时加载的情况,此时原本的图片位置会显示空白状态,这造成了不好的用户体验,所以我们需要加一个图片占位符。 有两种方式可以实现:
全栈程序员站长
2022/09/05
3.2K0
IE中出现 “Stack overflow at line” 错误的解决方法
在做网站时遇到一个问题,网站用的以前的程序,在没有改过什么程序的情况下,页面总是提示Stack overflow at line 0的错误,而以前的网站都正常没有出现过这种情况,在网上找了一下解决办法如下:我的程序出现这种错误的原因是第2种,我在图片中使用了onerror事件,当图片加载出问题时就是显示一个默认图片,然而在我的网站目录中并不存在这张默认图片,而源指定的图片也不存在,所以会触发onerror事件,由于两个图片都不存在,所以导致了一个死循环,导致内存溢出。
全栈程序员站长
2022/09/08
5880
相关推荐
一起详析“图片预加载”
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验