el-image加载失败时替换默认图片

2024-09-01

vue自定义指令，比onerror更优雅的方式实现当图片加载失败时使用默认图，提供三种方法

首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决我们都知道,img标签支持onerror事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件.可以使用一张提示错误的图片代替显示不了的图片. 例如这样使用: <img src="images/logo.png" onerror="javascript:this.src='images/

Jquery判断页面图片是否加载失败,加载失败则显示默认图片

例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> &l

vue，onerror实现当图片加载失败时使用默认图

1. 2.

ionic 图片加载失败，显示默认图片代替

1.首先编写自定义指令 angular.module('starter.directives', []) //当图片找不到事显示替代图片 .directive("errSrc", function() { return { link: function(scope, element, attrs) { element.bind("error", function() { if (attrs.src != attrs.errSrc) { attrs.$set(&quo

当图片加载失败时更换图片， Firefox onerror 报错

当图片加载失败时更换图片. <!DOCTYPE html> <meta charset="UTF-8"> <img src="http://www.qq.com/favicon.ico" /> 加载成功 <hr> <img src="http://www.qq.com/favicon" onerror="var img = event.srcElement; img.src = 'h

VS2012出现加载失败时的解决办法 win7同样适用

今天更新了WIN8系统补丁,然后就出现了大量的问题,特别是经常用的软件像VS2012 老是加载失败,还说是缺少什么包一类的,弄了好长段时间终于解决了,现在将经验分享下工具/原料 VS2012+WIN8 方法/步骤先看问题,打开昨天工作的VS2012项目显示加载失败,多试几次还是不行,提示该项目需要用户输入,或是去C盘看一个什么样的文件夹. 不一会儿的时间,VS2012的项目界面下就会出现下面所示的界面,未能正确加载,此程序可能是配置或是安装另一程序导致找到微软发布的相应更新包,

vue当图片加载失败时，用一个默认图片替换；

原理就是给img绑定error事件,替换原有的src地址. 首先在data中创建一个defaultImg(随便起的),里面的值是该默认图片的地址: 在html页面的img标签上绑定该属性这样默认图片就设置好了: 这样做的好处就是可以提高用户体验,而图片的alt属性,是在图片显示失败后出现的文字,像下图所示,但是这样的用户体验不高: 像后台管理系统中,如果是这样或者是有一个默认封面的话,会感觉很舒服:

electron-vue 图片加载失败后使用默认头像

<img :src="item.headUrl" alt="" class="contact-head" :onerror="morenImage"> data () { return { morenImage: 'this.src="static/image/head.png"', // 默认头像 } }

img标签中的图片加载异常时显示默认的图片

备忘:

当h5页面图片加载失败后，给定一个默认图

本文主要讨论页面中图片加载失败后替换默认图片的几种方式重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().img的complete属性.插件imagesLoaded.事件委托.事件捕获和图片预加载的方法等图片加载失败替换为默认图片 1.1 给图片绑定error事件当图片加载失败时会触发error事件 $("img").on("error", function () { $

WebForm、MVC图片加载失败处理

还是那个该死的WebFrom项目,部分功能替换为MVC后感觉好多了,但是WebForm.MVC都有图片加载失败时显示提示图片的需求,并且统一在js中处理.问题来了,js中图片路径怎么处理呢?现场有可能部署为网站,也有可能为应用,再加上对路径的不了解,决定弄个IHttpHandler一劳永逸解决路径问题. 搞定了IHttpHandler,发现图片还是显示不出来,日志中多了System.UnauthorizedAccessException: Access to the path 'xxxx' is

WebView加载失败或网络异常时，替换WebView的错误界面；

WebView在加载失败时会显示一个失败原因的界面,各个手机显示的界面还都不一样,部分手机还会把Url显示出来:我们要做的就是统一加载失败的界面: 大概思路:在WebView这个控件上面再覆盖一个View,监听WebView加载失败时把这个View显示出来,这样用户就看不到原来的WebView的失败界面了. 监听WebView开始加载.加载完成.加载失败: 在开始加载时,把自定义失败的View隐藏,加载失败时把这个View显示出来: mWebView.setWebViewClient(new W

JQuery Mobile - 处理图片加载失败！

重点来了:一定要记住error事件不冒泡(如果要用js的方法替换默认出错图片,记得把img的alt属性去掉). 相关的知识点:jquery的ready方法.$("img").error().img的complete属性.插件imagesLoaded.事件委托.事件捕获和图片预加载的方法等 1. 图片加载失败替换为默认图片 1.1 给图片绑定error事件当图片加载失败时会触发error事件 $("img").on("error", functi

微信小程序图片加载失败处理方案

小程序端展示网络资源图片可能会失败,下面介绍一种自己的处理方法 1. js文件中判断图片 url 是否存在,存在则正常显示,不存在则替换url为本地默认图片 2. 当图片 url 存在,但是加载失败时.小程序 image标签,提供 binderror 中用 setData 替换图片url为本地 url PS: 很多人会把第一步放在html里面 url ? url : '/image/default.png',来处理.原理是一样的,但是这类处理个人推荐放置逻辑层第二步,进行图片 url setD

img error 图片加载失败的最佳方案

有时候, 当img的src加载失败, 会显示缺省碎片图片, 影响用户体验. 有一个js事件onerror就派上了用场. 它可以在加载失败时, 显示缺省的图片. 它有两种使用方式. 第一种: 使用纯标签写法. 这样会增大网页的体积. 但是客户端解析速度要快点. <img src="https://www.88tv.org/upload/vod/20190829-1/db8b269c40172799f215aba93f03a03d.jpg" onerror="jav

.net加载失败的程序集重新加载

在.net程序中,程序集是Lazy加载的,只有在用的时候才会去加载,当程序集加载失败时,会触发AppDomain.AssemblyResolve的事件,在这个事件中,我们甚至还可以进行补救,从别得地方重新加载程序集. AppDomain.CurrentDomain.AssemblyResolve += (s, e) =>{ byte[] content = getLibBytes(e.Name); return Assembly.Load(content);}; 这个功能如果使用起来

js 图片加载失败处理方法

在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error([[data],fn])这个函数: $("img").error(function(){ //当图片加载失败时,你要进行的操作 //$(this).attr('src','images/no_pic.jpg'); }); 2.如果项目中没有jQuery这样的插件,可以使用HTML的DOM事

js解决img标签加载失败显示默认图片

问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加载默认图片. $(function(){ //注册加载失败事件,再次加载时先重新设置url,在清空原先的注册加载失败事件 $("img").attr("onerror","this.src='img/error.jpg;this.onerror=null;'&

Microsoft Visual Studio | VS打开解决方案时加载失败，或者出现错误提示

Microsoft Visual Studio | VS打开解决方案时加载失败,或者出现错误提示 1.加载失败并且输出状态栏也没什么错误提示的话,往往是因为一个低版本VS2010.VS2012等打开了VS2013甚至更高版本创建的解决方案. 解决方发:安装一个VS的相关补丁patch_KB2781514即可. 2.关于加载失败并且输出状态栏提示有错误, 按照提示进行修改即可. 比如说我出的一个错误就是,解决方案被我由C盘移动到D盘,结果再打开解决方案,CvDebug和CvRelease属性

js处理img标签加载图片失败，显示默认图片

1.第一种方法: 如果已经引入了jquery插件,就很好办.没有的话,如果实在需要,可以附上代码: script(type='text/javascript', src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js") //这是jade文件的写法,可以自行转换为html handle error $('img').error(function(){ $(this).attr('src', "d

el-image加载失败时替换默认图片

热门专题