小程序自定义加载图片

主要用于图片load，并预设无图片状态

wxml

<image 
    wx:if='{{!finishLoadFlag}}'
    mode='{{mode}}' 
    src='{{defaultImage}}' 
    style='{{width ? "width:" + width : ""}};{{height ? "height:" + height : ""}}' />

<image
  mode='{{mode}}'  
  src='{{originalImage}}' 
  bindload='finishLoad' 
  style='{{finishLoadFlag && width ? "width:" + width : ""}};{{finishLoadFlag && height ? "height:" + height : ""}}' />

js

Component({
  properties: {
  //默认图片
  defaultImage: String,
  //原始图片
  originalImage: String,
  width: String,
  height: String,
  //图片剪裁
  mode: String
},
data: {
  finishLoadFlag: false
},
methods: {
  finishLoad: function (e) {
    this.setData({
      finishLoadFlag: true
    })
  }
 }
})

引用

<imageload 
       class="nav-img"
       default-image='/images/Default/default-pic.png'  
       mode='aspectFill' 
       original-image='{{item.src}}'
       width="100%" height="100%" />

Tip

mode 是微信小程序内置图片裁剪方式

https://developers.weixin.qq.com/miniprogram/dev/component/image.html