vue-lazyload 动态切换图片问题

作为搞程序的我们,网络总是能再最无助的时候帮助我们解决问题!!!

使用 vue-lazyload 当需要动态切换图片时,DOM绑定的图片不会变,查看插件官方文档跟demo都没有说到这一问题, 难道这个问题就不能解决了,后翻了翻Issuse刚好前辈提了这一问题,原来需要加个 key,遂加之则图片就可以动态切换了,

<img v-lazy="ImgSrc" :key="ImgSrc">

这隐藏得够深的是不是,刚好在项目中遇到这一问题所以就记录下来分享给大家了希望能帮助到您。

转自:https://www.imooc.com/article/details/id/43608   感谢这个链接

原文地址:https://www.cnblogs.com/bester-ace/p/9450661.html

时间: 2024-08-30 07:23:02

vue-lazyload 动态切换图片问题的相关文章

Core Animation一些Demo总结 (动态切换图片、大转盘、图片折叠、进度条等动画效果)

前一篇总结了Core Animation的一些基础知识,这一篇主要是Core Animation 的一些应用,涉及到CAShapeLayer.CAReplicatorLayer等图层的知识. 先看效果图: 1.切换图片:      2.彩票转盘 3.图片折叠 4.进度条旋转 5.粒子效果 一.切换图片 看起来很复杂的动画,通过少量的计算和编码就可以简单的实现.要做到这一步,必须是需要研究iOS开发中的Core Animation和Core Graphics框架的.日常工作中,对于很多东西不求甚解

新闻动态切换图片html(flash)

效果图: 代码: <table id="table_zi"> <tr> <td class="width330"> <!--新闻图片交替开始--> <script type="text/javascript"> imgUrl1 = "../images/news1.jpg"; imgtext1 = "党校介绍1" imgLink1 = "

JS实现动态瀑布流及放大切换图片效果(js案例)

整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击图片放大.上下切换效果.HTML布局写的很简单,图片加载主要是在JS中通过访问自定义的JSON字符串来实现.动态瀑布流的原理简单理解就是把新需要加载的图片放在上一排总高度最小的图片或模块下面,实现参差不齐的多栏布局效果.具体效果如下: 做这个案例我用了之前自己封装的框架,所以小伙伴需要到我的另一篇文

vue项目中实现图片懒加载的方法

对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实现方法(使用vue的vue-lazyload插件) 1.安装插件 npm install vue-lazyload --save-dev 2.在入口文件main.js中引入并使用 import VueLazyload from 'vue-lazyload' 直接使用 Vue.use(VueLazyl

uni-app添加自定义底部导航栏,实现根据权限动态切换底部栏目的功能

uni-app针对底部导航栏TabBar,只提供了动态修改样式文字和图标的API,并没有提供动态修改某个栏目的跳转链接.追加或者删除某个栏目的功能. 问题阐述:实际开发的项目中的确需要判断登录账户的权限,来动态显示某两个,或者某三个栏目 如:管理用户显示[首页,管理,我的],普通用户显示[首页,我的],中间的管理页面,就得动态判断是否要追加了 解决方案:隐藏原有的tabBar,添加自定义的底部导航栏 1.思路:参照原来导航栏的写法,延用原来TabBar的样式布局,在每个栏目的首页添加自定义导航栏

JavaScript DOM 图片库---动态创建图片

<ul id="imgShowList"> <li><a href="image/1 (1).jpg" title="image/1 (1).jpg">图片1</a></li> <li><a href="image/1 (2).jpg" title="image/1 (2).jpg">图片2</a></li

【大话QT之六】QT皮肤系统的动态切换

应用需求: 提供皮肤切换选项,在不重启应用程序的情况下实现皮肤的动态切换. 理论基础: 1) 图片资源是如何被利用的 这里先简要说明一下实现原理,皮肤的动态切换其关键在于图片资源的加载方式.QT中每个应用程序启动后都会维护属于自己的资源子库,所有的图片以及UI资源都实现编译到rcc文件中,而rcc文件是整合了所有资源的二进制文件,这种方式属于动态加载. 图片是一种资源,在QT中,对于资源的使用有以下几点: 1>  一般来说:资源在内存中是用资源对象树来表示的,该树在程序启动时创建. 2>   

css滑动鼠标到img后,切换图片

写了个例子: <a href="#"><img src="http://csdnimg.cn/pubfooter/images/gongshang_logos.gif" border="0" onMouseOver="this.src='http://www.baidu.com/img/baidu_jgylogo3.gif?v=07491728.gif'" onMouseOut="this.src=

【安卓笔记】切换图片(底部带有小点效果)

下面我们要实现这样的效果: 我们将采用两种方式实现这种效果: 1.使用ViewPager: 思路:ViewPager提供左右滑动图片操作的支持,下方小点在代码中动态创建,整个布局采用FrameLayout. 先看布局: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" and