vant3中vant-image使用lazy-load报错：Uncaught(in promise)TypeError Cannot read property ‘deep‘ of undefined

最新推荐文章于 2024-01-11 14:57:54 发布
最新推荐文章于 2024-01-11 14:57:54 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： webH5 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34917408/article/details/120000881
版权

关于vant3中vant-image使用lazy-load报错：Uncaught (in promise) TypeError: Cannot read property ‘deep’ of undefined解决方案

问题描述:

  • vant3中vant-image使用lazy-load出现以下报错：

    • Uncaught (in promise) TypeError: Cannot read property 'deep' of undefined
解决方案:

  • 上述问题的原因在于：vant3中的Lazyload组件需要单独引入：

  • // 方式1：在需要用到的组件中引入:
了解本专栏 订阅专栏 解锁全文 超级会员免费看
木屋x
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Vue利用vant实现图片懒加载
Excalibur_C的博客
03-24 2327
在加载图片的过程中，经常由于图片加载太慢导致界面不友好，可以通过懒加载的方式实现让图片加载完成后再显示原图 在Vue中，可以利用vant的组件Lazyload 图片懒加载来实现 官方网址 Lazyload 首先因为 LazyLoad 是Vue的指令，我们需要在 main.js 中引用它 import { Lazyload } from 'vant'; Vue.use(Lazyload); 页...
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
npm i vant-aliapp -S --production 通过yarn安装 yarn add vant-aliapp --production npm使用 。 下载代码使用 直接通过git下载Vant Aliapp源代码，添加alipay alipay/npm目录副本到自己的项目中 git clone ...
vue3报错Cannot read property ‘deep‘ of undefined
hztiao的博客
12-12 1615
分析：这种情况一般是常用指令打错了 v-model ， v-if, v-for, v-show,v-else, v-bind, v-on等 我是把v-model打成 v-modle了
vue jest TypeError: Cannot read properties of undefined (reading ‘deep‘)
noscallion的博客
12-05 2371
vue jest 自定义指令
【BUGFIX】TypeError: Cannot read properties of undefined (reading ‘deep‘) at withDirectives
老衲的少女心i~
05-31 707
的指令，已经在main.ts申明了。在vue项目中，设置了自定义指令，但是不生效。检查自定义指令在使用的时候，有没有写错。可能是自动定指令写错了。
vant 使用Lazyload组件报错 Vant [Vue warn]: Failed to resolve directive: lazy
zhang_xiao_xie的博客
04-01 2325
实际上是vant自定义组件找不到问题 我mian.js中vant组件是全部加载的，所以可以改写为下面写法： import Vant,{Lazyload} from 'vant'; import 'vant/lib/index.css' Vue.use(Vant); Vue.use(Lazyload);
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
在Vue开发过程中，使用Vant UI库的下拉框组件`van-dropdown-item`时，可能会遇到一个问题：下拉框的标题`title`始终不变，即使选中了不同的选项。本篇将详细介绍如何解决这个问题。 首先，我们需要确保Vue项目正确...
vant-image本地图片无法显示
01-07
正常情况下都是这样写的，但是vant这个框架不知道怎么想的，居然加载不出来，花里胡哨。文档也没有写怎么加载本地图片，到处挖坑。如图： 加载失败 解决办法： src属性绑定requeir（）方法 :src=require('../...
vant 自定义 van-dropdown-item的用法
10-15
在移动应用开发中，Vant UI 是一款流行的组件库，它为 Vue.js 应用提供了丰富的 UI 元素和交互设计。本文将详细介绍如何自定义 Vant 的 `van-dropdown-item` 组件，以满足特定的设计需求。 `van-dropdown-item` 是 ...
vue3-ts-template-h5：:shortcake::clown_face:Vue3.0 +打字稿+ Sass + Vant移动端，附属微信朋友圈demo
02-06
vue3-ts-template-h5 Vue3.0 +打字稿初体验，打造h5，webapp移动端模板，开箱即用 :open_book: Vue3.0相关文档： 相关库名称 在线地址 :link: Vue3.0官方文档 Vue3.0中文文档 Composition-API手册 Vue3.0源码学习 ...
vue3 图片懒加载的实现
YWW_ABC的博客
04-15 2451
图片懒加载就是鼠标滑到哪，图片就加载到哪 一 开始把图片的地址放在data-set属性中，而不是放在src中，这样图片就不会发送http请求。我们通过计算距离，当 整个页面的高度 < 页面滑动的距离 + 浏览器可视区域的距离 的时候，就把data-set属性换为src属性，将图片显示出来
微信小程序图片懒加载（lazy-load，感觉不生效）
qq_45366081的博客
12-12 5475
图片懒加载。只针对page与scroll-view下的image有效 （也就是说在其page页面下的组件也是有效的），这些只需要在其img设置： <image wx：for="{{manyImg}}" src='{{item}}' lazy-load="true" bindload="loadLazyImgChange" ></image> 在其使用到额时候我们会感...
渲染列表 (六) -图片懒加载-逐渐加载图片-两种方式：单独安装vue-lazyload 插件 和 vant 提供的 Lazyload 组件
weixin_44867717的博客
02-29 1106
图片懒加载-逐渐加载图片-两种方式：单独安装vue-lazyload 插件 和 vant 提供的 Lazyload 组件 设置lazy-load属性来开启图片懒加载，需要搭配 Lazyload 组件使用 image图片组件-懒加载模式：https://youzan.github.io/vant/#/zh-CN/image#tu-pian-lan-jia-zai lazyload图片懒加载：htt...
vue项目- v-lazy懒加载 图片没有出来之前 loding的图标占位
weixin_55042716的博客
06-16 1976
v-lazy 表示在图片没有出来之前，会有loding的图标去占位， 图标在main.js中设置 步骤1.安装插件 npm i vue-lazyload -S 步骤2.全局配置 // 懒加载，在图片数据还没有更新之前显示的loding图片，---- import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { // 第一种 直接设置图片 小公司----弊端:图片是盗取的，稳定性差 // loading: "https://ss1.bdstat
vant 引用Lazyload报错Lazyload
impossible1994727的博客
03-07 1585
报错如上图： 将本地代码添加如下两行就可以了： import Vue from "vue"; Vue.use(Lazyload); 完整使用方式如下： <template> <div class="Index"> <!-- banner --> <div class="banner"> <van-swipe :autoplay="3000" indicator-color="#ea792d" class="..
Vant-ui图片懒加载
最新发布
橙-极纪元-cplvfx-JJY.Cheng
01-11 893
Vant-ui图片懒加载使用说明
vant-picker弹出层数量多卡顿可以使用vant的Lazyload 懒加载
qq_36406553的博客
07-04 642
【代码】vue使用页面给vant-picker弹出层传值数组量大卡顿可以使用Lazyload 懒加载。
vant组件库
Mr_Wangkk的博客
07-15 494
vant组件库
vant 引用Lazyload报错
m0_37777899的博客
09-15 189
解决： import Vue from "vue"; Vue.use(Lazyload); 成功：
引入vant在uniapp中使用npm i vant -S报错：Cannot read properties of null (reading 'pickAlgorithm')
05-03
这个报错可能是因为您的 `webpack` 版本过低导致的，可以尝试升级 `webpack` 版本来解决这个问题。 具体操作如下： 1. 全局安装 `webpack` 和 `webpack-cli`： ``` npm install webpack webpack-cli -g ``` 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木屋x

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值