vant showImagePreview 图片预览用法

最新推荐文章于 2024-03-22 17:11:36 发布

jjw_zyfx

最新推荐文章于 2024-03-22 17:11:36 发布

阅读量2k

点赞数

分类专栏： Vant vue 前端文章标签： vue.js css html javascript

本文链接：https://blog.csdn.net/jjw_zyfx/article/details/129485902

版权

前端同时被 3 个专栏收录

296 篇文章 0 订阅

订阅专栏

vue

138 篇文章 1 订阅

订阅专栏

Vant

8 篇文章 1 订阅

订阅专栏

vue3这种写法写的不清不楚的下面是详细使用过程

1、在要览的图片上添加点击事件–zoom_up

<img v-if="img_url" :src="img_url" @click="zoom_up" alt="">

2、zoom_up函数中调用showImagePreview

zoom_up(){
 showImagePreview([
      this.img_url  // 这里边可以是一个图片路径也可以是一个图片路径数组(如果是数组则把外层的数组去掉即可)
  ]);
}

3、已经做完了，点击后的效果如下：

在这里插入图片描述

4、再点一下就会退出全屏

优惠劵

jjw_zyfx

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vant showImagePreview 图片预览用法

vant showImagePreview 图片预览用法
复制链接

扫一扫

专栏目录

vant-image本地图片无法显示

01-07

坑：正常情况下都是这样写的，但是vant这个框架不知道怎么想的，居然加载不出来，花里胡哨。文档也没有写怎么加载本地图片，到处挖坑。如图：加载失败解决办法： src属性绑定requeir（）方法 :src=require('../assets/logo.png') 完美解决：加载失败 //script(vue) data() { return { //图片资源 imgList: [ require(“../assets/icon_emeetnote_nor.png”),

vant上传图片跟视频混合上传加预览demo

11-08

vant 中的上传组件只能上传图片跟其他文件,只带默认的预览. 这里支持视频预览.视频录制.可同时选中相册的视频跟图片一起上传.npm run dev 就可以了.免c币下载地址: https://download.lllomh.com/cliect/#/product/JB08857273648214

1 条评论您还未登录，请先登录后发表或查看评论

vant4实现图片放大预览

最新发布

monkey7

03-22

446

vant4使用showImagePreview 实现图片点击全屏预览

vue+vant使用图片预览功能ImagePreview的问题解决

10-15

主要介绍了vue+vant使用图片预览功能ImagePreview的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue3图片预览插件.zip

06-14

vue3 发布之后，开始使用 vue3 + ts 写代码，需要使用图片预览插件，在 npm 找了一圈没有适合的。要么是 v2 的插件，要么是不支持 ts,要么是使用不方便，因此封装一个简单的图片预览插件。内附使用说明纯手打，放心使用。实现方式参考了 vant 部分源码，纯手写并未使用任何三方插件，可放心使用。本来只是一个简单的 pc 端图片预览插件，但是考虑到有些小伙伴可能需要兼容移动端，故特意做了兼容

vant ImagePreview 图片预览

qq_39517116的博客

03-17

2565

vant ImagePreview 图片预览 <van-image class="maintain_end_info_img" v-for="(item,i) in images" :key="i" width="50" .

图片预览功能（vant ImagePreview）

weixin_44758753的博客

01-29

828

图片点击预览

vue 使用vant中的图片预览功能

夏夏

12-09

1万+

ImagePreview 图片预览介绍图片放大预览，支持函数调用和组件调用两种方式。函数调用 ImagePreview 是一个函数，调用函数后会直接在页面中展示图片预览界面。 import { ImagePreview } from 'vant'; ImagePreview(['https://img01.yzcdn.cn/vant/apple-1.jpg']); 组件调用通过组件调用 ImagePreview 时，可以通过下面的方式进行注册。 import Vue from

ImagePreview实现图片预览

Roriring的博客

03-11

3409

需求：现在很多手机app都不用原生态开发，我们可以使用手机前端ui框架实现。例如：本案例使用的是vue+cube-ui，那我们要实现在手机上查看大图，即点击图片，图片放大，可以对图片进行缩放，如果有多张，可以滑动切换。下面直接上代码： <template> <div class="container"> <div class="header...

vant 图片预览使用方法

qq_57325395的博客

08-22

573

步骤一: 引入 vant 组件。在main 里面注册为全局。在使用的文件里面引入。

vue2使用vant组件库；使用rem后vant组件样式变小了。

i_am_a_div的博客

10-09

2143

vue2使用vant组件库；vue2使用vant组件库;使用rem后vant组件样式变小了。

vant的图片上传组件预览问题

xiaozaq的博客

12-21

970

base64,iVBORw0KG..."格式时，页面可以正常显示，但是一点击图片预览，可以正常放大预览的，可是页面显示却不正常了，变为上面样子了。先记录问题：主要是我直接吧图片的base64字符串存入了数据库，再次打开页面加载图片时，要么就是页面显示图片错误，要么就是点击图片预览时查看失败。注意修改node_modules下面的源码后，需要删除vite的缓存。如果不设置objectUrl属性，则点击图片无法正常预览。然后清空缓存，重新启动调试，测试正常。点击图片预览前，页面显示正常。

vue2使用Vant组件轮播图实现图片预览

Tang_96的博客

12-27

761

在轮播图的图片上绑定一个点击事件传入轮播图下标,当点击这个图片的时候将下标赋值给预览图片的初始索引,以达到点击第几张轮播的图片预览第几张。视图部分添加初始索引属性startPosition,另外在data属性中记得要定义。步骤三:使用该组件视图。

vant4 ImagePreview 图片预览，图片放大后不能拖动

hexin76的博客

11-16

459

teleport: '.preview-img'//挂载在html中任意节点改变（最好另新增节点）vant4弹出层还有很多样式问题，欢迎讨论，可能是我菜了用法不对所以出些奇怪bug。主要原因事与弹出层混合使用导致图片预览出现宽度丢失。样式中调整谨慎使用穿透。

vant UI 使用 ImagePreview 预览图片

weixin_44590591的博客

02-15

2052

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: {

Vue vant 使用 ImagePreview 预览图片

热门推荐

z772330927的博客

07-03

1万+

Vue vant 使用 ImagePreview 预览图片场景1 编列数组生成图片，点击预览图片 <div class="zoom" v-for="(item, index) in listData" v-show="item" :key="index" > <img v-if="item" class="img"

vue实现通过点击按钮预览图片（第二种方法）

weixin_64141611的博客

04-07

1206

上篇适合项目中多个页面使用按钮实现大图预览的场景，一次封装多次使用。今天介绍一款简单的方式，适合在单个页面中使用，话不多说，直接上代码。

【Vant 】组件基础使用

weixin_47375144的博客

01-17

1940

1、ImagePreview 图片预览 <template> <van-cell title="图片预览" center> <img :src="images" @click="choosePicture(images)" /> </van-cell> </template> <script> import { ImagePreview } from 'vant' export default{ dat

如何用axios接口数据实现vant图片预览

07-14

要使用 axios 获取接口数据并实现 Vant 图片预览功能，您可以按照以下步骤进行操作： 1. 首先，确保您已经安装了 axios 和 vant 组件库。如果没有安装，可以通过运行以下命令进行安装： ``` npm install axios vant ``` 2. 在您的代码中导入 axios 和 vant 相关组件： ```javascript import axios from 'axios'; import { ImagePreview } from 'vant'; ``` 3. 使用 axios 发起请求获取图片数据，并将其保存到一个变量中： ```javascript axios.get('your_api_endpoint').then(response => { const imageData = response.data; // 假设返回的数据是一个包含图片信息的数组 // 其他处理逻辑... }); ``` 在上述代码中，`your_api_endpoint` 应替换为您实际的接口地址，`response.data` 是获取到的接口数据。 4. 在需要预览图片的地方，使用 Vant 的 `ImagePreview` 组件来实现图片预览功能。例如，您可以在一个图片列表中循环渲染图片，并为每个图片添加点击事件： ```html <template> <div> <img v-for="image in imageData" :src="image.url" @click="previewImage(image.url)" /> </div> </template> ``` 5. 在 Vue 实例的方法中定义 `previewImage` 方法，该方法使用 `ImagePreview` 组件来预览图片： ```javascript methods: { previewImage(url) { ImagePreview([{ url }]); } } ``` 在上述代码中，`url` 是被点击的图片的 URL。通过以上步骤，您可以使用 axios 获取接口数据，并使用 Vant 的 `ImagePreview` 组件实现图片预览功能。请注意根据您的实际情况进行适当的调整。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交