做图片懒加载的步骤

1、百度搜索v-lazy-npm 打开首页,然后在windows的cmd里输入npm install vue-lazyload --save (下载图片懒加载的插件)
2、复制下面代码到 main.js中 (注①:将有注释删掉的那句删掉)(注②:粗体的那一句话、loading代表加载中的意思,所以将后面的路径换成你想要加载时显示的gif图片在线地址即可)

点击进入GIF动态加载图片地址

   import VueLazyload from 'vue-lazyload'
 
   Vue.use(VueLazyload)   //删掉即可
 
   // with options
    Vue.use(VueLazyload, {
       preLoad: 1.3,
       error: 'dist/error.png',
       loading: 'dist/loading.gif',    // 换成你想要显示的图片地址
       attempt: 1
   })

3、将<img src=""/ > 中的src换成v-lazy 就完成啦在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_43209114/article/details/83245139