微信小程序 —— 图片占位处理

占位图效果如下：

 实现代码：

HTML：

  <block wx:for="{{ imagesArr }}" wx:key="index">
    <image class="protocol-image" 
           mode="widthFix"
           lazy-load="{{ true }}" src="{{ item }}"></image>
  </block>

 CSS：

.protocol-image {
  width: 100%;
  height: auto;
  min-height: 300rpx;
  background-color: #fafafa;
  background-image: url('https://www.yiso.cn/uploadfile/kindeditor/image/20190626/20190626092296299629.gif');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

JS：

data: {
    imagesArr: new Array(17)
}