vue尚品汇商城项目-day07【vue插件-48.（了解）图片懒加载插件】

48.（了解）图片懒加载插件

图片懒加载效果就是：当网络不好时默认先显示别的默认图片，等待图片加载好后再展示新的图片（就是提供个默认展示，防止网络不好打开一片空白）。

图片懒加载特点说明

(1) 还没有加载得到目标图片时, 先显示loading图片

(2) 在<img>进入可视范围才加载请求目标图片

安装命令：cnpm install --save vue-lazyload

插件官网地址：https://www.npmjs.com/package/vue-lazyload

注意点1：

问题：报错，如图

版本如图：

扫描二维码关注公众号，回复： 14797371 查看本文章

代码如下：

src/main.js

import cat from '@/assets/images/cat.png';
//引入插件
import VueLazyload from 'vue-lazyload';
//注册插件
Vue.use(VueLazyload,{
  //懒加载默认的图片
  loading:cat
});

src/pages/Search/index.vue

<img v-lazy="good.defaultImg" />

答案：版本太高了，重新安装1.3.3低版本即可解决报错：cnpm install --save [email protected]

本人其他相关文章链接

1.vue尚品汇商城项目-day07【44.个人中心二级路由搭建+45.我的订单+46.优化登录跳转+47.独享守卫】
2.vue尚品汇商城项目-day07【vue插件-48.（了解）图片懒加载插件】
3.vue尚品汇商城项目-day07【vue插件-49.（了解）自定义插件】
4.vue尚品汇商城项目-day07【vue插件-50.（了解）表单校验插件】
5.vue尚品汇商城项目-day07【51.路由懒加载】
6.vue尚品汇商城项目-day07【52.打包文件，处理map文件】
7.vue尚品汇商城项目-day07【53.nginx反向代理配置】
8.vue尚品汇商城项目-day07【vue插件-54.（了解）生成二维码插件】
9.vue尚品汇商城项目-day07【55.编码测试与打包发布项目】