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

在这里插入图片描述 @[toc]

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

图片懒加载特点说明

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

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

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

注意点1：

问题：报错，如图

在这里插入图片描述

版本如图：

在这里插入图片描述

代码如下：

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 vue-lazyload@1.3.3

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