vue-lazyload 图片懒加载不显示

Question

<template>
  <div>
    <div class="img-box" :style="{ height: clientHeight + 'px' }">
      <div v-for="(item, index2) in group" :key="index2" class="list-group-item" @click="selectItem(item)">
        <img class="avatar" v-lazy="item.avatar" alt="" />
        <span class="name">{{ item.name }}</span>
      </div>
      <div class="add" v-if="isMoreLoad">加载更多</div>
      <div class="loadImg" v-if="loadLastText">没有数据了</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      group: [
        {
          avatar: require('../assets/wb.jpg'),
          name: '多肉'
        },
        {
          avatar: require('../assets/wb.jpg'),
          name: '多肉'
        },
        {
          avatar: require('../assets/wb.jpg'),
          name: '多肉'
        }
      ]
    };
  },
  mounted() {
   
  },
  methods: {
   
  },
 
  destroyed() {
   
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.img-box {
  background: #f4f4f4;
  /* height: 100px; */
}
.list-group-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
// loading大小
img[lazy='loading'] {
  width: 30px;
  height: 30px;
}
// 实际图片大小
img[lazy='loaded'] {
  width: 100%;
  height: 100px;
}
@keyframes fade {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
</style>

使用脚手架 写完进入时可以显示 刷新浏览器图片不显示怎么解决

Answer 1

等待大神解答