vue自定义指令---处理加载图片失败时出现的碎图,onerror事件

一、自定义指令

1、局部注册和使用

2、全局注册和使用

二、自定义指令处理图片加载失败（碎图）

一、自定义指令

vue中除v-model、v-show等内置指令之外，还允许注册自定义指令，获取DOM元素，扩展额外的功能。

1、局部注册和使用

注册在组件内的script内的directives内

export default {directives:{focus:{ //自定义指令名inserted(el){ //el就是使用此指令的DOM元素，此处el指这个input框el.focus() //此el对应的DOM元素自动获取焦点}}}
};

使用时，v-自定义指令名即可

      <input type="text" v-focus>

2、全局注册和使用

在main.js用 Vue.directive()方法来进行注册, 以后随便哪个.vue文件里都可以直接用v-fofo指令

Vue.directive('Color', {inserted(el, binding) { //el代表此DOM元素，binding.value接收传递过来的参数el.style.color = binding.value //给此DOM元素设置文字颜色},update(el, binding) { //使用此指令的DOM更新就执行此方法el.style.color = binding.value}
})

所有的.vue文件都可直接使用

<!-- 传参为字符串" '颜色值' " 或 "变量" -->
<p v-Color="'red'" >修改文字颜色</p>

注意点： inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
update方法 - 指令对应数据/标签更新时, 此方法执行，只要更新就触发

el参数为使用此自定义指令的DOM元素

binding参数用来接收传的值，binging.value就是具体值

二、自定义指令处理图片加载失败（碎图）

1、在main.js中注册自定义指令，接收传递的值
Vue.directive('imgerror', {inserted(el, bindings) {el.onerror = function() { //当图片有地址 但是地址没有加载成功的时候 会报错 会触发图片的一个事件 => onerrorel.src = bindings.value //加载失败, 给一张默认图展示}    }
})
2、组件中使用自定义指令值处理，

imgDefault1为用户可能出错的图，

imgDefault为正确的图，当用户图地址加载失败时，使用这个默认图，

img1为本地的图片，当用户没有图片数据，或数据为空时，加载此默认图

<img v-imgerror="imgDefault" :src="imgDefault1 || img1" alt="">
补充：组件内直接使用图片方式
<script>
import defaultImg from '图片路径' //第二种导入
export default{data(){return{img1: require('图片路径'), //第一种方式defaultImg：defaultImg  //第二种}}
}
</script>

vue自定义指令---处理加载图片失败时出现的碎图,onerror事件相关推荐

VUE：img标签加载图片失败时，显示一张自定义默认图片
简介在使用<img />标签时,会遇到图片加载失败(有图片资源路径,但是可能路径拼接不正确.域名失效等)的情况,此时,显示出来的效果看着就很不舒服,就想显示一张默认图片. img加载失败 ...
记录--Vue自定义指令实现加载中效果v-load（不使用Vue.extend）
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助网站效果演示:ashuai.work:8888/#/myLoad GitHub仓库地址代码:github.com/shuirongshu- ...
htmlimg图片加载失败_动态加载图片失败的默认图显示
经常碰到这类场景,动态加载图片时,因为一些原因(图片链接不存在啊,图片误删啊,图片路径不对或图片路径为空等等)导致真实图片显示不出来.那么为了提高用户体验,都会显示一个默认图. 动态加载图片失败时,显 ...
chrome浏览器加载图片失败问题
现象:项目上线后,加载图片是正常的.过了一段时间,部分用户反馈加载图片失败,部分用户加载图片正常. 分析:系统是https的,图片链接为http的.Chrome在80版本后(所以部分用户能看到,部分看 ...
vue中通过js加载图片显现
在vue开发中会遇到这样的问题:有时需要在img中加载多个静态资源的图片,如果我们将src的路径整个定义成一个变量,会发现img加载不出来正个图片的路径,其实此时需要require()来加载静态资源的 ...
qtCreator加载图片失败
qtCreator加载图片失败前言在qt中加载图片总是失败解决 1.首先工程pro文件中加入qrc文件配置项,比方说image.qrc 2.编辑image.qrc文件 <RCC>&l ...
关于img标签加载图片失败优化以及懒加载。
这篇博客算是完全的笔记了,记录一下平常中不怎么注意的img标签的一些事. 昨天看到这篇Handling broken images with the service worker文章,这文章中有另外提 ...
android动态设置错误页面,Android中替换WebView加载网页失败时的页面
我们用webView去请求一个网页链接的时候,如果请求网页失败或无网络的情况下,它会返回给我们这样一个页面,如下图所示: 上面这个页面就是系统自带的页面,你觉得是不是很丑?反正小编本人觉得非常丑,很难 ...
three.js textureLoader加载图片失败
textureLoader无法加载图片 three.js的坑真的不是一般的多,关键是使用者还少,面向百度谷歌编程根本搜不到类似案例. 博主在使用three.js中的textureloader,加载本地 ...

vue自定义指令---处理加载图片失败时出现的碎图,onerror事件

一、自定义指令

1、局部注册和使用

2、全局注册和使用

二、自定义指令处理图片加载失败（碎图）

vue自定义指令---处理加载图片失败时出现的碎图,onerror事件相关推荐

最新文章

热门文章