微信小程序没有图片（占位图）封装组件

<image wx:if='{{!finishLoadFlag}}' mode='{{mode}}' src='{{defaultImage}}' style='{{width ? "width:" + width : ""}};' class='image-class'/>
<image mode='{{mode}}' class='{{finishLoadFlag ? "" : "before-load"}}' src='{{originalImage}}' bindload='finishLoad' style='{{finishLoadFlag && width ? "width:" + width : ""}};' />

.before-load {
    width: 0;
    height: 0;
    opacity: 0;
  } 

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

使用：

1. 在要使用占位图页面的json中引入封装的组件

{
  "usingComponents": {
    "goodsList": "../../../components/goodsList/goodsList"
  },
  "navigationBarTitleText": "申请退换"
}

2. 在使用界面通过定义的组件名来引用

<image-loader  default-image='/static/default/home-banner.png' mode='widthFix' 
 original-image="{{utils.getImageUrl(item.picPath)}}"></image-loader>