常规onerror 的使用 和 vue 里面的onerror使用
常规 onner 使用我们都知道,img标签支持onerror事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。<img src="images/img.png" onerror="notimgfound();"/><script type="text/javascript">functi...
常规 onner 使用
我们都知道,img
标签支持onerror
事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror
事件。可以使用一张提示错误的图片代替显示不了的图片。
<img src="images/img.png" οnerrοr="notimgfound();"/>
<script type="text/javascript">
function notimgfound(obj) {
obj.onerror = "";
obj.src = "images/logoimgerror.png";
obj.onerror = null; //解绑onerror事件
}
两个参数的实例:
<img src="images/img.png" οnerrοr="houseimgerror(this,1);"/>
<img src="images/img.png" οnerrοr="houseimgerror(this);"/>
function houseimgerror(obj,num3d) {
obj.onerror = "";
if(num3d == 1){
obj.src = baseUrl+"/pc/common/images/list404_3d.jpg";
}else{
obj.src = baseUrl+"/pc/common/images/houseList404.jpg";
}
obj.οnerrοr=null;
obj.jqimg = '';
}
</script>
通过vue绑定onerror实现:
<img :src="images/logo.png" :οnerrοr="defaultImg">
<script>
export default {
name: "imgError",
data() {
return {
defaultImg: 'this.src="' + require('images/logoError.png') + '"' //默认图地址
}
}
}
</script>
通过vue自定义指令
//全局注册自定义指令,用于判断当前图片是否能够加载成功,可以加载成功则赋值为img的src属性,否则使用默认图片
Vue.directive('real-img', async function (el, binding) {//指令名称为:real-img
let imgURL = binding.value;//获取图片地址
if (imgURL) {
let exist = await imageIsExist(imgURL);
if (exist) {
el.setAttribute('src', imgURL);
}
}
})
/**
* 检测图片是否存在
* @param url
*/
let imageIsExist = function(url) {
return new Promise((resolve) => {
var img = new Image();
img.onload = function () {
if (this.complete == true){
resolve(true);
img = null;
}
}
img.onerror = function () {
resolve(false);
img = null;
}
img.src = url;
})
}
然后使用的时候就特别方便了,因为是全局注册的,所以每个页面都可以直接使用
<!--v-real-img 就是刚刚定义的指令,绑定的为真实要显示的图片地址。src为默认图片地址-->
<img src="images/logoError.png" v-real-img="images/logo.png">
更多推荐
所有评论(0)