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

绝地灬酷狼 2024-03-24 13:41 75阅读 0赞

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]

#### 文章目录 ####

*   *  48.（了解）图片懒加载插件
 *  本人其他相关文章链接

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

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

图片懒加载特点说明

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

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

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

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

注意点1：

> 问题：报错，如图

![在这里插入图片描述][f7411e0d15bf4c1c81b21277a8340e04.png_pic_center]

版本如图：

![在这里插入图片描述][1a00e06f074941d8a227fe262a3a5c52.png_pic_center]

代码如下：

> 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

答案：版本太高了，重新安装1.3.3低版本即可解决报错：cnpm install --save vue-lazyload@1.3.3

## 本人其他相关文章链接 ##

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

[201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/39bf1dda575f470cb4a61fde69836dc6.png
[https_www.npmjs.com_package_vue-lazyload]: https://www.npmjs.com/package/vue-lazyload
[f7411e0d15bf4c1c81b21277a8340e04.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/e1e05b46620f43d38ddd4554f719048f.png
[1a00e06f074941d8a227fe262a3a5c52.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/f4036dbf15e4465faf31c5fc4e8cb198.png
[vue_-day07_44._45._46._47.]: https://blog.csdn.net/a924382407/article/details/129921578
[vue_-day07_vue_-48.]: https://blog.csdn.net/a924382407/article/details/129921625
[vue_-day07_vue_-49.]: https://blog.csdn.net/a924382407/article/details/129921710
[vue_-day07_vue_-50.]: https://blog.csdn.net/a924382407/article/details/129921764
[vue_-day07_51.]: https://blog.csdn.net/a924382407/article/details/129921802
[vue_-day07_52._map]: https://blog.csdn.net/a924382407/article/details/129921841
[vue_-day07_53.nginx]: https://blog.csdn.net/a924382407/article/details/129921856
[vue_-day07_vue_-54.]: https://blog.csdn.net/a924382407/article/details/129946011
[vue_-day07_55.]: https://blog.csdn.net/a924382407/article/details/129946037