Vue项目优化: 使用vue-lazyload插件实现图片懒加载
vue-lazyload
vue-lazyload插件用于 vue 项目中图片的懒加载 npm地址：https://www.npmjs.com/package/vue-lazyload
vue-lazyload安装
通过npm安装
npm install vue-lazyload –save-dev
通过CDN引入使用
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
vue-lazyload使用
在main.js中
//引入vue-lazyload
import VueLazyload from 'vue-lazyload'
//使用vue-lazyload
Vue.use(VueLazyload, {
//图片加载失败时显示的图片
error: require('./assets/img/error.jpg'),
//图片正在加载时显示的图片
loading: require('./assets/img/loading.jpg')
})
配置参数：
在需要的组件中使用
将需要懒加载图片的:src属性换成v-lazy
<div v-for="(item, index) in imgList" :key='index'>
<img v-lazy="item.src">
</div>
如果是本地相对路径图片，要使用require()引入图片
<img v-lazy="require('../../assets/img/banner.jpg')">
需要懒加载的背景图片
<div v-lazy:background-image="require('../../assets/img/bg.jpg')"></div>
原文始发于微信公众号（前端24）：Vue项目优化: 使用vue-lazyload插件实现图片懒加载
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/216998.html
