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，要不然在接口获取的时候，拿到了图片地址，但是会一直显示不出来的。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
解决Can''t find variable: SockJS vue项目的问题
这篇文章主要介绍了解决Can't find variable: SockJS vue项目的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了Vue实现双token无感刷新,双token机制,尤其是指在OAuth 2.0授权协议中广泛使用的access token（访问令牌）和refresh token（刷新令牌）组合,文中通过代码示例讲解的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了Vuex入门学习之Getter详解,Vuex 允许我们在 store 中定义 getter(可以认为是 store 的计算属性),就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Vue封装数字框组件实现流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-04-04
这篇文章主要给大家介绍了关于vue-cli配置使用Vuex的相关资料,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,本介绍的非常详细,需要的朋友可以参考下2021-07-07
vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决
Vue项目devServer.proxy代理配置详解的是一个非常常见的需求,下面这篇文章主要给大家介绍了关于vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决的相关资料,需要的朋友可以参考下2023-02-02
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
这篇文章主要介绍了VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
组件化开发能大幅提高应用的开发效率、测试性、复用性等,下面这篇文章主要给大家介绍了关于通用vue组件化展示列表数据的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-06-06
Vite处理html模板插件之vite-plugin-html插件使用
这篇文章主要给大家介绍了关于Vite处理html模板插件之vite-plugin-html插件使用的相关资料,Vite是一个现代化的前端构建工具,而vite-plugin-html是Vite的一个插件,用于在构建时自动生成HTML文件,需要的朋友可以参考下2023-10-10
随着 Vue 3 的发布,一些在 Vue 2 中常用的通信方式在 Vue 3 中可能不再适用或有所变化,为了应对这种变化,我们可以选择在 Vue 3 应用中实现自定义的“事件总线”机制,所以本文给大家介绍了Vue3中如何自定义消息总线,需要的朋友可以参考下2024-05-05
最新评论