Vue-waterfall-easy中图片无法正常显示


<template>
  <vue-waterfall-easy v-bind:imgsArr="imgsArr" v-on:scrollLoadImg="fetchImgsData"></vue-waterfall-easy>
</template><style lang="scss" scoped></style><script>
import vueWaterfallEasy from "vue-waterfall-easy";
export default {
  components: {
    vueWaterfallEasy
  },
  data() {
    return {
      imgsArr: [], //用于存放所有已经加载的图片数组
      fetchImgsArr: [] //用于存放每次滚动时下一批需要加载的图片数组
    };
  },
  methods: {
    initImgsArr(n, m) {
      // 初始化图片数组的方法,把要加载的图片装入数组中
      console.log("执行了initImgsArr方法");
      var arr = [];
      for (var i = n; i < m; i++) {
        arr.push({
          src: require(`../static/img/${i + 1}.jpg`), //存放图片的地址
          info: "这是一张图片" //存放图片的描述
        });
      }
      return arr;
    },
    fetchImgsData() {
      //获取新的图片数据的方法,用于网页滚动满足条件时调用
      console.log("执行了fetchImgsData方法");
      this.imgsArr = this.imgsArr.concat(this.fetchImgsArr);
    }
  },
  created() {
    console.log("执行了created方法");
    this.imgsArr = this.initImgsArr(0, 6); //初始化先加载6张图片
    this.fetchImgsArr = this.initImgsArr(7, 13); //模拟下一批新的图片的数组数据
    console.log(1, this.imgsArr, 2, this.fetchImgsArr);
  }
};
</script>
求各位大佬看一看,为什么图片没有正常显示啊?
弄了快一整天了...