快应用的image标签不支持图片加载失败后显示默认图片的方案
这是我目前想到的方案:
使用两个image标签, isShow进行控制,及利用onerror的方法:当图片加载失败的时候在这个方法里控制默认图片的显示 代码展示
<template>
<div>
<div class="wrap">
<image
if="isShow"
onerror="onImageError()"
class="banner"
src="111.png"
></image>
<image if="!isShow" class="banner" src="{{errorImageUrl}}"></image>
</div>
</div>
</template>
<script>
export default {
private: {
isShow: true,
errorImageUrl: ''
},
onImageError() {
this.isShow = false
this.errorImageUrl = `https://img1.baidu.com/it/u=4090369061,1994957220&fm=26&fmt=auto&gp=0.jpg`
},
};
</script>
<style lang="scss" >
.wrap {
flex-direction: column;
}
.banner {
height: 381px;
width: 450px;
}
</style>
1.事件 支持通用事件
名称 | 参数 | 描述 |
---|---|---|
complete 1030+ | {width: widthValue(px), height: heightValue(px)} | 图片加载完成时触发 |
error 1030+ | - | 图片加载失败时触发 |