x-img 懒加载，图片并排出现四个时加载出现问题

[xxsser]

您好，自己尝试找原因无果... ...

使用x-img 当图片并排出现四张时，最后一张加载不出来。 并排少于四张全部正常，只要时有四张的都时最后一张无法加载，有点诡异

[airyland]

帖代码。

[xxsser]

<template>
  <div class="img_msg_content">
      <flexbox v-for="(files, index) in imageGrid" :key="index" class='image_list'>
          <flexbox-item v-for="(file, sindex) in files" :key="sindex" :class="'image_box_'+files.length">
              <!--img :src="imageSrc(file)" @click='previewImage(files, sindex)' /-->
              <x-img :src="file" :webp-src="file + '?type=webp'"
               :default-src="require('../../assets/images/loading.gif')" 
              :offset="-100" container="#vux_view_box_body"></x-img>
          </flexbox-item>
      </flexbox>
  </div>
</template>
<script>
import { Flexbox, FlexboxItem, XImg } from 'vux'

export default {
  props: {
    images: {
      type: Array,
      required: true
    }
  },
  components: {Flexbox, FlexboxItem, XImg},
  computed: {
    imageGrid () {
      let grid = []
      for (let row = 0; row < this.images.length / 4; row++) {
        let tmpArr = []
        for (let col = 0; col < 4; col++) {
          if (typeof (this.images[row * 4 + col]) === 'undefined') {
            break
          }
          tmpArr.push(this.images[row * 4 + col].file_path)
        }
        grid[row] = tmpArr
      }
      return grid
    }
  },
  methods: {
    previewImage (files, index) {
      this.$wechat.previewImage({
        current: files[index],
        urls: files
      })
    }
  }
}
</script>

<style scoped>
.image_box_1 img{width: 100%; height: 20rem; }
.image_box_2 img{width: 100%; height: 12rem; }
.image_box_3 img{width: 100%; height: 8rem; }
.image_box_4 img{width: 100%; height: 5rem; }
.img_msg_content {margin-top: 5px; padding: 0px 0px;}
</style>

[xxsser]

发现在大屏幕下并排4个显示也是没有问题的。 在小尺寸屏幕手机上就会出现问题

[xxsser]

不是4张的问题，是屏幕宽度的问题。

[xxsser]

官网由于是单图，当屏幕很窄是，也一样无法加载。 http://imgur.com/a/Ypo9Z

[xxsser]

当图片宽度小于100px时，不加载

[xxsser]

已解决，offset参数问题，为复数时，会导致该问题。