<template>
  <div class="img-lazy-load">
    <!--  | img150type2 -->
    <image class="img-thumb" :mode="mode" :src="src" @load="imgOnload" @error="errorImg"></image>
    <image v-if="originSrc" class="img-origin" :mode="mode" :src="url"></image>
  </div>
</template>

<script>
export default {
  props: {
    mode: {
      type: String,
      default: 'aspectFill'
    },
    src: {
      type: String,
      required: true
    },
    clip: {
      type: String
    }
  },
  data () {
    return {
      originSrc: '',
      url:''
    }
  },
  methods: {
    errorImg(e) {
      console.log('图片加载错误',e)
    },
    // 图片加载完成
    imgOnload () {
      this.url = this.src.includes('https') ? this.src : this.src.replace('http','https')
      uni.getImageInfo({
        // src: this.src.replace('http://', 'https://') + `?` + this.clip,
        src: this.url,
        success: ({path}) => {
          // console.log('path',path)
          this.originSrc = path
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import './img-lazy.scss';
</style>