vue项目中图片懒加载时出现的问题及解决
更新时间：2022年04月02日 08:41:27 作者：池中飞雪
这篇文章主要介绍了vue项目中图片懒加载时出现的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue图片懒加载的问题
项目中遇到一个问题，记录一下，vue项目中前期没有做图片懒加载的时候，当图片出现错误或者显示路径不对，我加了onerror事件进行错误监听并添加一张默认的图片，优化用户体验。
后期因为图片数量变多，所以加入了图片懒加载，但在懒加载中挂载时只加了loading的图片，没有加error，所以导致页面图片未正常加载的地方出现默认图片闪烁的现象，最后在挂载时加入error引入一张默认图片就好了
vue图片懒加载实现步骤
1.安装插件
npm install vue-lazyload --save-dev
2.main.js中引入，挂载
import Vuelazyload from 'vue-lazyload'
Vue.use(Vuelazyload, {
error: require('../static/img/nonelive.png'),
loading: require('../static/img/nonelive.png')
})3.在渲染结构的地方把：src换成v-lazy即可
<img v-lazy="item.pictureUrl?item.pictureUrl:'../../../static/img/nonelive.png'" alt="图片未显示" οnerrοr="this.src='../../../static/img/nonelive.png'">
vue图片懒加载踩过的坑
一个页面图片比较多的时候，需要对界面的图片进行懒加载处理，今天遇到了，做个懒加载的笔记。
1.需要安装vue的懒加载插件。
npm install vue-lazyload --save-dev
2.需要在main.js里面进行引用。
import VueLazyload from "vue-lazyload"; Vue.use(VueLazyload);
或者自定义
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})3.修改图片的路径，设置为懒加载的形式，将src改成v-lazy
<img v-lazy="psdimg" class="psd" />
今天踩过的坑总结
当遇到是v-for循环的时候，或者用div包裹着img的时候，需要在div上面添加v-lazy-container="{selector:'img'}"
<div v-lazy-container="{ selector: 'img' }">
<img data-src="//domain.com/img1.jpg">
<img data-src="//domain.com/img2.jpg">
<img data-src="//domain.com/img3.jpg">
</div>或者这种：
<div>
v-lazy-container="{ selector: 'img' }"
class="contentDiv construction"
v-html="content">
</div>以及我将html里面的图片路径拿到后，转换成懒加载的时候，
一定是 data-src，而不是v-lazy，要不然在接口获取的时候，拿到了图片地址，但是会一直显示不出来的。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vite Vue3 EsLint Prettier配置步骤极简方法详解
这篇文章主要为大家介绍了Vite Vue3 EsLint Prettier配置步骤的极简方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
今天小编就为大家分享一篇Vue解析带html标签的字符串为dom的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家详细介绍了Vue如何利用xlsx-style库实现导出Excel并修改样式的功能,文中的示例代码讲解详细,有需要的可以参考下2024-01-01
这篇文章主要介绍了在Vue中使用防抖与节流,及this指向的问题,具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
本文给大家详细介绍了如何使用使用 vue.js脚手架工具vue-cli构建大型单页应用的方法，非常的实用，有需要的小伙伴可以参考下2018-02-02
在开发中,PDF预览和交互功能是一个常见的需求,无论是管理系统、在线教育平台,还是企业内部的知识库,能够高效地展示和操作PDF文件都能极大地提升用户体验,本文将详细介绍如何在Vue项目中实现pdf预览功能,需要的朋友可以参考下2025-03-03
这篇文章主要给大家介绍了关于vue.js中Vue-router 2.0基础实践的相关资料，其中包括vue-router 2.0的基础用法、动态路由匹配、嵌套路由、编程式路由、命名路由以及命名视图等相关知识，需要的朋友可以参考借鉴，下面来一起看看吧。2017-05-05
本篇文章主要给大家讲述了VueJS应用中管理用户权限的详细过程和方法，以及相关的代码展示，需要的朋友参考下吧。2018-02-02
最近项目中使用了vue3+vite开发一个App项,下面这篇文章主要给大家介绍了关于使用vite发布app存在的所有问题的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要为大家介绍了vue3组件库Shake抖动组件搭建过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
最新评论