vue-lazyload v-lazy 图片不出来

最新推荐文章于 2023-03-20 01:20:05 发布
最新推荐文章于 2023-03-20 01:20:05 发布
阅读量862 收藏 3
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/shimadongxue/article/details/128220800
版权
本文介绍了在Vue2中使用vue-lazyload实现图片懒加载的方法，并指出应避免使用最新版本，推荐稳定版本为1.3.3。该版本经过验证能够良好地支持Vue2项目。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue-lazyload v-lazy 图片不出来

vue 2 使用 图片懒加载 库 vue-lazyload 不要安装最新版本；

不确定是什么开始不支持的。

Vue 2 本人确定支持的是， 1.3.3；

npm i vue-lazyload@1.3.3 -S

shimadongxue
关注
vue上线后图片不显示_vue-lazyload懒加载图片显示不出来
weixin_35172279的博客
12-31 2362
用vue-lazyload做懒加载，按照教程说的首先安装npm install vue-lazyload --save-dev这里我有个问题 ，就是这样安装之后，vue-lazyload出现在devDependencies而不是在dependencies里面，按理说 devDependencies不是说 只是开发阶段使用 而不会在打包之后出现 但是按照我的理解 这个插件不是应该通过--save出现...
vue-lazyload使用总结(推荐)
10-17
Vue-Lazyload是一款在Vue.js项目中常用的图片懒加载插件。它可以帮助开发者优化网页性能，减少页面初次加载时的数据量，从而提升用户体验。在Vue项目中，当用户滚动页面时，Vue-Lazyload会自动加载可视区域内的图片...
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
11-27
在vue中使用图片懒加载详细指南，分享给大家。具体如下： 说明 当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。 使用方式 使用vue的 vue-lazyload 插件 插件地址:https://www.npmjs.com/package/vue-lazyload 案例 demo： 懒加载案例demo Installation 安装方式 npm $ npm i vue-lazyload -D CDN CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js
vue v-lazy无法加载图片
6块腹肌的博客
11-26 3485
1、如果是无法正确加载图片，可以通过调整下图的位置 先use，然后再引入，不知道什么原因，反正这样就可以解决问题。 2、如果是无法加载占位图，可以换一个写法，如上图，使用require引入，我一开始直接使用路径引入也是不可以。网上还有说可以通过在static文件夹引入的话，就可以直接使用路径的形式。 ...
在vue.js路上遇到的小坑 ----------------------v-lazy加载图片失败 不显示默认图片
若如流水 淡淡流过
08-03 1万+
我相信很多初学者跟我一样在vue的路上一波三折吧！从安装到打包 处处都是小坑 首先 我们 cnpm  vue-lazyload --save后在main.js里引入 import VueLazyLoad from 'vue-lazyload'//加载后台图片 Vue.use(VueLazyLoad,{  error:引入图片的路径,    loading:l引入图片的路径， }) 在此你...
vue 项目中实现懒加载 左侧图片不显示问题
旧忆时光的博客
12-26 1211
1.首先 需要 引入第三的插件库 npm install vue-lazyload --save-dev 2.在入口文件 `` import VueLazyLoad from ‘vue-lazyload’ Vue.use(VueLazyLoad) // 如果不设置 loading 那么预加载的时候显示的图片就是它本身data-src 路径下的图片，所以在这我就没设置其它的实属性了 3.组件内对背...
vue-lazyload-source-code:学习vue-lazyload源代码-vue source code
03-24
$ npm i vue-lazyload -S CDN CDN： ： < script src =" https://unpkg.com/vue-lazyload/vue-lazyload.js " > </ script > < script > Vue . use ( VueLazyload ) . . . </ script > ...
浅谈vue-lazyload实现的详细过程
01-19
本文介绍了浅谈vue-lazyload实现的详细过程，分享给大家，也给自己留个笔记 首先 ,在命令行输入npm install vue-lazyload&&cnpm install vue-lazyload 然后,在main.js里引入这个模块。 import 'VueLazyload' from ...
vue 基于vue-lazyload图片懒加载、延迟加载
Goaread的博客
03-20 575
效果是默认不加载图片，先用一个占位符图来代替，等使用图片的时再进行加载（比如滚动到图片的时候），如果真正的图片请求出错了，用默认的出错图片来进行占位。
移动端懒加载图片不显示全部
weixin_45879374的博客
04-16 757
移动端Lazyload懒加载不显示全部图片的解决办法 在写移动端网页时，引用jquery.lazyload.js时，页面上的图片只显示一两个，并没有全部显示出来。找了半天原因，才发现了问题所在。 是因为之前的css文件里写成了 body,html{heigh:100%} 不应该固定高度，而是auto body,html{heigh:auto} 简洁版如下： 引用： <script src="/static/tzto/js/jquery.lazyload.js"></script>
使用jquery.lazyload.js图片预加载（懒加载）遇到的问题，图片加载不出来
热门推荐
caikys的博客
01-30 1万+
1、在使用jquery.lazyload.js时，如果是数据直接在DOM节点直接渲染，并且图片排列规则，使用方法： 给img标签添加的属性有：   &lt;img class="lazy" src="__TEMP__/{$style}/public/images/load_banner.jpg" data-original="{:__IMG($v.adv_image)}" alt=""&g...
el-image开启懒加载或使用vue-lazyload有时候图片懒加载无效，一定要页面滚动才会展示
山有木兮木有枝 心悦君兮君不知
10-13 7312
问题场景： 在一个列表中，用el-image来显示图片，并开启懒加载，但前面的图片（如列表的第一、二张图片）需要页面滚动才会显示，明明图片是在浏览器的可是窗口内。 解决方案： 这一般是因为在v-for遍历的时候，:key被设置成了index下标 <ul> <li v-for="(item,index) in imgList" :key="index"> // 这里如果key的值是index， 那每次分页,key的值就又是从0开始 <img
终于解决了hexo开启懒加载后图片无法立即显示的问题
东曜说
04-18 2440
干货时刻 本文主要介绍hexo-lazyload-image插件引发的bug以及相关API 问题描述 笔者最近在折腾hexo搭建的个人主页：东曜说 的时候，遇到了这样一个 bug： 网站开启图片懒加载后，首次加载页面图片不显示，但是刷新一次后会显示。 我的插件版本是：hexo-lazyload-image v1.0.10 。 问题原因 笔者为了提升网页的浏览体验，开启了pjax优化，其原理在于pjax封装了ajax实现局部刷新，将网站变成了单页面应用。 懒加载插件如果配置不当，将与pjax插件发生冲突，导致
vue-lazyload,图片不刷新的问题
Isaac_Play的博客
10-16 1038
vue-lazyload，是一个很好用的图片懒加载插件，他可以在图片加载中和加载失败的时候预设占位的图片，让产品的交互更加美观和人性化，但最近我发现了一个问题：当页面首次进入的时候，v-lazy可以正确的区分加载图片地址的正确与否，正确的展示图片，但当我退出页面重新进入的时候，就发现v-lazy默认图片加载是error的了 明明图片是可以打开的，状态还是error，刷新页面会出现，首次进入页面也会出现，只有退出页面重新进入的时候不能正确展示，所以初步判断问题的原因是因为缓存 <div v-lazy
v-lazyload数据变化图片不切换
weixin_33748818的博客
05-10 255
这个问题让我很困惑，明明得到的商品数据已经改变了，但是就图片不变化，随后找到了解决办法，那就是多加一个动态的key <img v-lazy="item.productImage" :key="item._id" alt="商品图片"> 转载于:https://www.cnblogs.com/samsara-yx/p/10845714.html...
lazyload加载bug，切换标签时需要不加载图片的解决办法
weixin_30755709的博客
12-18 245
lazyload加载bug，切换标签的情况下不滚动不加载图片...解决办法，点击之后图片向上滚动一像素再向下滚动一像素 $(".navL li").click(function(){ $('body,html').animate({scrollTop: $(window).scrollTop() + 1 }, 0); $('body,html').animate({scrollTop: $...
vue2 中使用 vue-lazyload 做图片懒加载
sywdebug的博客
06-17 652
注意：以下图片只可以使用 url 图片，本地图片加载不出。main.js 里引入并使用。
vue-lazyload 使用中关于动态图片加载的问题
AlexGeek
09-12 3009
小记：在这些天学习Node+Vue的前后端全栈项目时，为了进行系统的优化，使用了大量的插件，其中一个插件的使用出现了问题无法的到解决，这个就是vue-lazyload的动态图片加载问题 比如说在上面的这种情况下，商品区做了懒加载，但通过商品区左边的动态切换按钮进行切换发现，商品信息可以发生改变，但是商品图片却不可以动态加载，这个主要是由于在v-lazy指令的使用中没有添加key，如下的使用是...
vue图片懒加载插件vue-lazyload监听加载失败事件的解决方案
u012443286的博客
05-15 5138
 对于vue项目而言，图片懒加载是一个常见的图片加载方案，可以优化用户体验，而vue-lazyload则是一个广泛使用的插件。  对于某些业务场景，我们需要监听图片加载失败事件，而后进行相应的处理，然而无论是官方文档还是网络上的解决方案都不直观甚至有错误，开发者不经过一番探索，很难知道如何处理，甚至怀疑该插件是否能监听加载失败事件。笔者经过一番探索，所幸的是，发现该问题终究是能够解决的，现将相关解决方案分享如下。 业务场景 试想这样的场景： 在img标签上，使用v-lazy绑定的图片的地址。图片的地址可能
Vue-lazyload：轻松实现Vue图像组件的延迟加载
标题中提到的“vue-lazyload”是一个专门设计用于Vue.js框架的插件，其核心功能是实现图像或组件的延迟加载（也称为懒加载）。延迟加载是一种性能优化技术，其目的是提高网页的加载速度和用户体验。在这种技术下，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值