vant 组件 ImagePreview 图片预览 报错

最新推荐文章于 2023-12-21 11:19:13 发布
最新推荐文章于 2023-12-21 11:19:13 发布
阅读量1.5k 收藏
点赞数 3
分类专栏： vant 文章标签： vue.js npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qitiandada/article/details/119382364
版权

前言

vant的 ImagePreview 组件 很好用 直接传入图片数组，就可以实现预览。
直到 有一天忽然报错
在这里插入图片描述
顺着报错的js去看了一下 里面的this.parent 是 undefined

解决

把依赖包删掉 npm i 下载
不要用 cnpm！ ， 不要用cnpm！ ， 不要用cnpm ！

qitiandada
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
opencv模糊图像变清晰_模糊变清晰，这软件太强了！
weixin_39976951的博客
11-12 2352
大家晚上好。图片变模糊，就是把原本一张清晰的图片变成看不清的那种。这个东西吧，确实很不好，尤其是观感体验。我今天就来说个能去除模糊的软件，效果说实话还挺不错的。 SmartDeblur软件仅支持Windows设备我先对比一下，小伙伴们可以看看效果。这是图片原本的样子，可以看到非常模糊，完全看不清图片的元素。这是处理之后的图片，很明显的能看到清晰度提升了很多，图片中的元素也都能看到了。使...
vue2使用v-viewer实现图片预览ImagePreview
I am your sun ❤
03-01 4311
Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作
vue原生项目vant使用图片预览组件ImagePreview报错（非脚手架，cdn引入js文件使用组件）
刺心的博客
03-16 2023
在非脚手架的原生项目中使用: import { ImagePreview } from 'vant'; ImagePreview(['https://img01.yzcdn.cn/vant/apple-1.jpg']); 这么写会报错，那么怎么解决这个问题呢，其实很简单 因为不是脚手架安装的vantUI，用法有些不同，有些组件需要在前面加vant 正确ImagePreview的用法： vant.ImagePreview(['https://ss0.bdstatic.com/70cFuHSh_Q1YnxG
Vue2.0+Vant图片预览（ImagePreview）无法显示照片
Smart_11的博客
03-26 2152
Vue2.0+Vant图片预览（ImagePreview）无法显示照片的解决办法
在H5中使用vant中的ImagePreview组件报错
qq_44747508的博客
12-29 1445
因为不是脚手架安装的vantUI，用法有些不同，有些组件需要在前面加vant ImagePreview的用法： vant.ImagePreview(['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg']);
vant-image在uni-app下报错，Invalid handler for event “load“ Invalid handler for event “error“
Bitter的博客
10-17 1974
vant ui h5环境。vant-image会报错，源码中，vant-image里面有onLoad和onError方法。但是断点调试的时候,this.onLoad是undefined。可能被uni-app干掉了。 解决方法： vant在uniapp总是有各种小问题，尽量不要在uniapp中的环境下使用。 ...
vue+vant使用图片预览功能ImagePreview的问题解决
10-15
在Vue.js框架下，结合Vant UI库进行开发时，我们可能会遇到使用`ImagePreview`组件进行图片预览时遇到的一些问题。`ImagePreview`是Vant提供的一种轻量级的图片预览解决方案，它能够方便地展示一组图片，并且支持...
vant-image本地图片无法显示
01-07
正常情况下都是这样写的，但是vant这个框架不知道怎么想的，居然加载不出来，花里胡哨。文档也没有写怎么加载本地图片，到处挖坑。如图： 加载失败 解决办法： src属性绑定requeir（）方法 :src=require('../...
vant上传图片跟视频混合上传加预览demo
11-08
vant 中的上传组件只能上传图片跟其他文件,只带默认的预览. 这里支持视频预览.视频录制.可同时选中相册的视频跟图片一起上传.npm run dev 就可以了.免c币下载地址: ...
vant组件小程序版 适用小程序
09-01
Vant组件库是专门为移动端开发设计的一套UI框架，它源于滴滴出行的开源项目，旨在提供轻量、易用且高度可定制的组件，适用于快速构建高质量的移动应用。在小程序开发领域，Vant WeApp是Vant组件库的一个版本，专为...
Vue使用有赞ImagePreview（图片预览）遇到的问题
热门推荐
Z.Dragon 的博客
08-22 1万+
首先说下有赞ImagePreview的使用 有赞官方文档：https://youzan.github.io/vant/#/zh-CN/image-preview 先上个预览效果图 问题点：如果图片预览弹框没有隐藏的话，在路由切换的时候也会一直显示 如图，路由已切换： 解决方案：beforeRouteLeave 钩子中调用 close() 方法关闭预览遮罩 beforeRouteLeave ...
image-preview不能加载部分图片的问题
qq_49294271的博客
07-17 540
image-preview是若依vue前端默认写法，无法加载百度的这张图片，其他的图片倒是正常。无法理解这个问题，解决方法是换element-ui的预览写法去展示这张图片。先贴代码片段和两种写法的效果。
Uniapp使用vant Weapp图标组件报错问题
天码星空
03-05 948
1.异常信息 问题解决参考：https://blog.csdn.net/it_cgq/article/details/111991644 11:43:21.725 Module build failed (from ./node_modules/postcss-loader/src/index.js): 11:43:21.725 SyntaxError 11:43:21.735 (36:10521) Unclosed bracket 11:43:21.736 34 | 11:43:21.741 3
记录一下a-image-preview-group 相册模式点击切换相册展示数据，不改变却追加了之前的数据的问题
weixin_43666952的博客
05-20 1519
在这段代码中 有一个封面 ，有一个相册数组，官方功能就是点击封面预览相册数组中的图片，在这之外设置了一个切换的按钮 清空相册数组重新赋值期望点击之后可以预览的是另外一组数组信息，然而。不管怎样切换之后的相册居然会携带上之前的数组的信息，点击预览就有 了问题，解决方法就是在。加上判断就可以了，现在就可以正确的变换了！
vant的图片上传组件预览问题
最新发布
xiaozaq的博客
12-21 1638
base64,iVBORw0KG..."格式时，页面可以正常显示，但是一点击图片预览，可以正常放大预览的，可是页面显示却不正常了，变为上面样子了。先记录问题：主要是我直接吧图片的base64字符串存入了数据库，再次打开页面加载图片时，要么就是页面显示图片错误，要么就是点击图片预览时查看失败。注意修改node_modules下面的源码后，需要删除vite的缓存。如果不设置objectUrl属性，则点击图片无法正常预览。然后清空缓存，重新启动调试，测试正常。点击图片预览前，页面显示正常。
vue-preview实现缩略图踩坑记录：Property or method “$preview“ is not defined 用不了、无法修改图片样式
H_xiang_xiang的博客
06-26 699
基本配置 1、下载 npm i vue-preview -S　 2、在index.js中引入并安装 import VuePreview from'vue-preview' Vue.use(VuePreview) 3、 如果是按照早几年的视频教学方法，会在页面中引入以下标签 <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index,
Cannot read properties of null (reading ‘style‘)前端错误记录21/10/20
a791812366的博客
10-20 5412
在代码中使用到了v-if， 并且在mounted中引用函数，判断并渲染这个v-if下面的元素了。 经过查阅后得知： v-if 初始渲染 初始值为 false 组件不会渲染，生命周期钩子不会执行，v-if 的渲染是惰性的。 初始值为 true 时，组件会进行渲染，并依次执行 beforeCreate,created,beforeMount,mounted 钩子。 切换 false => true 依次执行 beforeCreate,created,beforeMount,mounted 钩子。 tru
vant2 使用 ImagePreview方法,报错Cannot read properties of null (reading 'size') 如何解决
07-22
对于 `ImagePreview` 组件报错 "Cannot read properties of null (reading 'size')"，通常是因为传递给组件的图片路径为 `null` 或 `undefined` 导致的错误。 解决方法如下： 1. 确保你传递给 `ImagePreview` 组件的图片路径是有效的。检查你的代码，确认图片路径是正确的，并且确保它存在于你的项目中。 2. 在使用 `ImagePreview` 组件之前，先判断图片路径是否为 `null` 或 `undefined`。你可以使用条件语句或三元运算符来进行判断，如下所示： ```javascript // 假设你的图片路径为 image const image = getImagePath(); // 获取图片路径的函数 // 使用条件语句 if (image) { // 调用 ImagePreview 组件 return <ImagePreview src={image} />; } else { return null; // 或者返回一个默认的占位图像，或者其他适当的处理方式 } // 或者使用三元运算符 return image ? <ImagePreview src={image} /> : null; ``` 通过上述方法，你可以避免传递无效的图片路径给 `ImagePreview` 组件，从而解决该报错。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值