v-imglazyload

图片懒加载指令

从npm上下载

cnpm install v-imglazyload --save
或者
yarn add v-imglazyload --save

引入：

在main.js中引入

import imglazyload from 'v-imglazyload'
Vue.use(imglazyload)

使用：

<template>
  <div id="app">
    <div v-for="(img, index) in imgs" :key="index">
      <img v-imglazyload="{ img }" />
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      imgs: [
        require("@/assets/imgs/3.jpg"),

        require("@/assets/imgs/6.jpg"),
        require("@/assets/imgs/7.jpg"),
        require("@/assets/imgs/8.jpg"),
        require("@/assets/imgs/14.jpg"),
        require("@/assets/imgs/18.jpg"),
        require("@/assets/imgs/21.jpg"),
      ],
    };
  },
};
</script>

<style lang="scss">
img {
  width: 80%;
  height: 300px;
}
</style>