你不知道的小程序自定义组件如何加载图片

原生 image 组件并没有提供这些常用功能，因此我们需要使用自定义组件来实现。

1. 自定义组件

在小程序中，创建一个自定义组件，并将其命名为 image-wrapper。在组件的 template 中，添加以下代码：

<view class="image-wrapper" @tap="reloadImage">
  <image class="image" src="{{ src }}" mode="widthFix" />
  <view class="placeholder" wx:if="{{ !loaded }}">加载中...</view>
</view>

在组件的 style 中，添加以下代码：

.image-wrapper {
  position: relative;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ccc;
  text-align: center;
  line-height: 100px;
}

在组件的 script 中，添加以下代码：

module.exports = {
  properties: {
    src: {
      type: String,
      value: ''
    }
  },
  data: {
    loaded: false
  },
  methods: {
    reloadImage() {
      this.setData({
        loaded: false
      })
      this.loadImage()
    },
    loadImage() {
      wx.getImageInfo({
        src: this.data.src,
        success: () => {
          this.setData({
            loaded: true
          })
        },
        fail: () => {
          this.setData({
            loaded: false
          })
        }
      })
    }
  },
  attached() {
    this.loadImage()
  }
}

2. 使用自定义组件

在小程序页面中，使用自定义组件 image-wrapper，并将 src 属性设置为图片的链接。例如：

<image-wrapper src="http://example.com/image.jpg"></image-wrapper>

当图片加载完成时，自定义组件会将 loaded 属性设置为 true，并隐藏占位图。如果图片加载失败，自定义组件会将 loaded 属性设置为 false，并显示占位图。

3. 点击加载图片

如果图片加载失败，用户可以点击图片再次加载。在自定义组件 image-wrapper 中，添加以下代码：

methods: {
  reloadImage() {
    this.setData({
      loaded: false
    })
    this.loadImage()
  },

这样，当用户点击图片时，自定义组件会将 loaded 属性设置为 false，并重新加载图片。

4. 总结

使用自定义组件 image-wrapper，可以轻松地实现图片未加载完成时先展示占位图，等到图片加载完毕后再展示实际的图片。假如图片链接有问题（比如 404），依然展示占位图。甚至你还可以增加点击图片再次加载的功能。