快应用的image标签不支持图片加载失败后显示默认图片的方案

404 阅读1分钟

快应用的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+-图片加载失败时触发