vantui的van-image-preview无法显示的原因

原创 已于 2024-07-29 08:31:34 修改 · 481 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java #前端 #服务器

于 2024-07-25 23:45:19 首次发布

是否用了

<van-image-preview v-model="show" :images="images" @change="onChange">

 里面的v-model="show"改成v-model:show="show"

pixlehe
关注
vant的图片上传组件预览问题
xiaozaq的博客
12-21 2570
base64,iVBORw0KG..."格式时，页面可以正常显示，但是一点击图片预览，可以正常放大预览的，可是页面显示却不正常了，变为上面样子了。先记录问题：主要是我直接吧图片的base64字符串存入了数据库，再次打开页面加载图片时，要么就是页面显示图片错误，要么就是点击图片预览时查看失败。注意修改node_modules下面的源码后，需要删除vite的缓存。如果不设置objectUrl属性，则点击图片无法正常预览。然后清空缓存，重新启动调试，测试正常。点击图片预览前，页面显示正常。
曲线解决van-image-preview长按保存图片
u012214254的专栏
03-25 3964
项目中使用到了vant组件库中ImagePreview组件来查看大图，单单只是浏览大图的话确实很好用，如果要加上其他功能就比较繁琐，查看了官方文档，ImagePreview没有提供长按事件以及相对应的方法，社区https://ask.dcloud.net.cn/question/66750也有同胞遇到相同的问题，依旧没有解决，开发时间有限只有曲线解决一下这个问题。 当然，这个问题也可以通过调用原...
vue+vant使用图片预览功能ImagePreview的问题解决
11-20
如果您搜到这篇文章的话，那员外估计您遇到跟我一样的问题了，即在打开图片预览功能后，如果不关闭预览的图片，同时改变路由的话，会发现即使路由改变了，预览的图片还在文档的最顶层显示，如图：      着实让员外百思不其解，在调用vant 的 ImagePreview图片预览组件中，没有html，有的只是引入ImagePreview 和js的调用。在这种情况下，员外是想自己添加任何方法都没法实现的，同时想在离开路由时的beforeRouteLeave 钩子中关闭这个 ImagePreview  也实现不了，因为根本就拿他没有一点办法。同时可以看到，这个图片预览的 html 是挂载在 window 上面
vant-image本地图片无法显示
01-07
坑： 正常情况下都是这样写的，但是vant这个框架不知道怎么想的，居然加载不出来，花里胡哨。文档也没有写怎么加载本地图片，到处挖坑。如图： 加载失败 解决办法： src属性绑定requeir（）方法 :src=require('../assets/logo.png') 完美解决： 加载失败 //script(vue) data() { return { //图片资源 imgList: [ require(“../assets/icon_emeetnote_nor.png”),
React Vant中ImagePreview组件图片显示问题解析
最新发布
gitblog_07820的博客
11-13 415
在使用React Vant 3.3.2版本时，开发者可能会遇到ImagePreview组件的图片显示问题。本文将深入分析这个问题，并提供解决方案。 ## 问题现象 当开发者尝试使用ImagePreview.open({ images })方法时，如果images参数是通过函数传参方式传递的，图片可能无法正常显示。这会导致预览功能失效，影响用户体验。 ## 根本原因 经过分析，这个问题源于I
vant组件ImagePreview动态渲染v-html里的图片不显示bug
上官熊猫的博客
04-13 4746
问题描述： 对元素v-html的内容中图片实现点击放大预览，因为我做的是移动端项目，所以使用的ui框架是vant，用到了图片预览组件ImagePreview， 因为是通过v-html绑定的数据，获取图片的src需要绑定监听事件，ImagePreview有两种使用方法：组件调用和函数调用，起初我使用的是函数调用，组件结构如下： <template> <div class="c...
vant 组件 ImagePreview 图片预览 报错
qitiandada的博客
08-04 1952
前言 vant的 ImagePreview 组件 很好用 直接传入图片数组，就可以实现预览。 直到 有一天忽然报错 顺着报错的js去看了一下 里面的this.parent 是 undefined 解决 把依赖包删掉 npm i 下载 不要用 cnpm！ ， 不要用cnpm！ ， 不要用cnpm ！ ...
vant3.0以上版本 ImagePreview 图片预览扩展添加视频预览
qq_32294071的博客
08-08 2030
vant3.0以上版本 ImagePreview 图片预览扩展添加视频预览。
van-image-preview自定义关闭图标
09-14
在Vant的ImagePreview组件中，可以通过`closeable`属性显示关闭按钮，但是默认的关闭图标可能不是用户想要的。 3. 为了实现自定义关闭图标，我们可以使用`close-icon`属性来指定自定义图标的名称（如果使用Vant...
vue项目中使用vant组件ImagePreview图片预览在iOS上存在的问题
tsw529的博客
06-11 2921
存在问题 在多个组件内使用，iOS下，切换路由后，会导致ImagePreview组件无法进行图片预览,放大图片 <img v-for="(item, index) in imgList" @click="imgPreview(imgList, index)" :key="index" :src="item" alt /> // 组件内 import { ImagePreview } from "vant"; methods: { imgPreview(img
vue3.x 中使用 vant ＜van-image＞图片不显示的问题
qq_37172200的博客
12-03 7361
背景 今年发布了Vue3版本，新特性还挺多，有一项是按需引入组件，减小包体积的同时增加灵活度，很赞！但也引发了UI库跟不上版本的问题，比如 Element UI库，是基于vue2.x 的，目前还不支持vue3,是不是很头疼？不怕，有赞UI库 vant 已经支持 vue3了！ 相信有挺多小伙伴会遇到以下问题： 1、 安装了vant，该怎么按需引入？ 2、在哪个页面组件引入，怎么全局引入？ 3、<van-image/> 不加载图片显示空白，本地图片路径不加载等 解决方案： 1、 安装了vant，该
vant UI 使用 ImagePreview 预览图片
weixin_44590591的博客
02-15 2507
vant UI 使用 ImagePreview 预览图片 通过 npm 安装 // Vue 3 项目，安装最新版 Vant npm i vant // Vue 2 项目，安装 Vant 2 npm i vant@latest-v2 需要预览图片的页面使用 // 局部使用： import Vue from 'vue'; import { ImagePreview } from 'vant'; Vue.use(ImagePreview); export default { components: {
图片预览功能（vant ImagePreview）
weixin_44758753的博客
01-29 1017
图片点击预览
vant ImagePreview 图片预览
qq_39517116的博客
03-17 2813
vant ImagePreview 图片预览 <van-image class="maintain_end_info_img" v-for="(item,i) in images" :key="i" width="50" .
在H5中使用vant中的ImagePreview组件报错
qq_44747508的博客
12-29 1618
因为不是脚手架安装的vantUI，用法有些不同，有些组件需要在前面加vant ImagePreview的用法： vant.ImagePreview(['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg']);
【vant】移动端预览图片
weixin_48847755的博客
11-16 2161
vant组件实现移动端预览图片
van-image移动端点击图片预览
ss_Tina的博客
03-31 2653
van-image预览图片，点击图片预览大图。
vant4的 toast、dialog、notify、ImagePreview不显示样式
weixin_57895172的博客
07-03 1150
vant4的 toast、dialog、notify、ImagePreview不显示样式
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值