vue中img标签onerror事件

使用:onerror去绑定事件

该方法能正确处理onerror事件，并防止闪图

<img type="image/x-icon" :src="item.icon?item.icon:''" :onerror="imgOnError" />//图片损毁时触发imgOnError(e){let img = e.srcElement;img.src = this.errorImg;img.onerror = null; //防止闪图},

使用@error会导致回闪

使用@error会导致回闪，图片回闪问题

<img type="image/x-icon" :src="item.icon?item.icon:''" @error="imgOnError($event)" />//图片损毁时触发imgOnError(e){console.log("闪图")let img = e.srcElement;img.src = this.errorImg;  //data中的图片img.onerror = null; //防止闪图，写了但是图片还是会回闪},

这种图片不回闪，但是还是回疯狂回调onerror事件，并且会发现元素的onerror事件那里还注册这函数，并没有清除掉。

<img type="image/x-icon" :src="item.icon?item.icon:''" @error="imgOnError()" />//图片损毁时触发imgOnError(){console.log("触发事件")let img = event.srcElement;  //已经弃用img.src = this.errorImg; //data中的图片img.onerror = null; //防止闪图，写了但是还是会疯狂回调onerror的注册事件},

关于没图片时onerror事件不触发问题

vue在item.icon为null或者undefined时，并不会对这个src进行赋值，没有src属性貌似是无法触发onerror事件的。

<img type="image/x-icon" :src="item.icon" :onerror="imgOnError" />
<!--vue处理出来结果，没src无法触发onerror事件-->
<img type="image/x-icon" /><img type="image/x-icon" :src="item.icon?item.icon:''" :onerror="imgOnError" />
<!--vue处理出来结果，有src并且解析不出图片，触发onerror事件-->
<img type="image/x-icon" :src=""/>

vue中img标签onerror事件相关推荐

vue中img标签404错误处理事件onerror
以下为图片链接失效的情况若服务上的图片直接在浏览器上可以打开,但是在img上报404错误处理方法在index.html中添加代码如下 <meta name="referrer&qu ...
vue中el-radio-group点击事件，双击取消
vue中el-radio-group点击事件普通用法需要实现双击取消普通用法需要注意,如果@change事件除了当前选中的单选按钮的label值,还需要带上另外的参数,则需要用event来代替 ...
vue中input标签的使用
vue中input标签的使用普通input标签 <input type="text" value="" placeholder="placeh ...
vue中使用v-on绑定事件中，获取$event.currentTarget，日志打印为null
问题:vue中使用v-on绑定事件中,获取$event.currentTarget,日志打印为null dom结构: <li @click="clickEvent('hello',$e ...
Vue中自定义标签及其使用
Vue中自定义标签及其使用问题需求自定义创建组件的vue文件编辑组件使用导入申明使用使用整个代码效果问题我们在使用Vue开发移动端应用程序时,常常使用Vant Weapp中的 ...
vue中img标签引用图片地址变量不显示，引入失败问题
vue中img标签,src的地址赋值给vue属性不显示 ,如图修改后写法,加上require即可原文 https://blog.csdn.net/Chris__wang/article/detai ...
前端判断img图片未能正确加载时显示一个默认图片。img标签onerror事件设置了本地默认图片还是不显示的问题
前端img标签中引用后端交给的图片地址时,有可能这个路径下图片被删除或者损坏了,那么页面在加载img图片时就显示为,太丑了. img标签有个onerror事件,就是当图片未被正确加载的时候调用此事件, ...
Vue中鼠标移入移出事件-解析
鼠标在li上移动也会触发移出事件两组鼠标事件 mouseover 和 mouseout mouseenter 和 mouseleave mouseover 和 mouseout 什么时候使用说明根 ...
在vue中input标签手机号码进行正则验证
今天遇到一个问题就是在vue中给input进行正则手机号码的验证下面是今天的代码,用js进行书写,没有用elementUI,代码如下: <div cla ...

vue中img标签onerror事件

vue中img标签onerror事件

使用:onerror去绑定事件

使用@error会导致回闪

关于没图片时onerror事件不触发问题

vue中img标签onerror事件相关推荐

最新文章

热门文章