uni-app-图片的预览-previewImage

最新推荐文章于 2024-04-21 16:25:51 发布
最新推荐文章于 2024-04-21 16:25:51 发布
阅读量5.1k 收藏 3
点赞数 1
文章标签： html html5 js uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51061595/article/details/120004547
版权

效果图

在这里插入图片描述
点击第一张图

在这里插入图片描述
鼠标点住向右移动

在这里插入图片描述
代码

上传图片我这里就不说了

因为预览图片是要先点击图片的，所以在图片那写个点击预览事件，这里顺便把图片路径item当作参数传给事件。

在这里插入图片描述
用current接收参数item，用uni.previewimge来实现预览功能，基本用两个参数（current和urls）就可以了。
current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。
这里的current我用了图片链接item。
current:current 因为两个单词一样，所以可以直接单写current
urls：需要预览的图片链接列表，这里我用imgArr图片链接数组

在这里插入图片描述
OK

官网：https://uniapp.dcloud.io/api/media/image?id=chooseimage

WinFang5
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
【uni-app】预览图片（单张、多张）uni.previewImage()
得意小门生的博客
07-31 2万+
uni-app官网：https://uniapp.dcloud.io/api/media/image?id=previewimage 微信小程序官网：https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html uniapp 实现图片预览 单图预览和多图预览 关键点就是调用 uni.previewImage({ current: index, urls: photoList }); 如果是单图
PreviewImage-crx插件
03-17
使图像预览 用户可以将鼠标悬停到所有图像上，并在每个网站中以实际图像大小查看它们。 2.2版--------------- 1.一些未在Facebook中查看的图像。 该错误已解决。 支持语言:English
微信小程序wx.previewImage预览图片
热门推荐
汉堡请不要欺负面条
05-25 14万+
二.例子 （1）网络的图片 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left; width:45%; height:200px; margin:2%; } .previewimg image{ width:100
uniapp中实现点击图片预览
最新发布
qq_45569925的博客
04-21 563
参数：为一个数字，表示当前选中的图片在数组中的索引值，从0开始计数。参数：为一个字符串数组，表示需要预览的图片数组；在uniapp中，我们可以使用。
previewImage.js实现图片放大预览，滑动切换，双指缩放，图片缓存
jia2799897415的博客
08-15 1408
previewImage.js 实现的移动端图片的预览，缩放功能。
uniapp中使用图片预览功能
weixin_53156345的博客
08-07 1946
在使用uniapp写项目时可能会使用到图片预览，unaipp官网就内置了这个方法。使用current传入链接或索引值和urls传入需要预览的图片列表即可实现。
【uni】预览previewImage，上传图片触发onShow生命周期，解决方法（ispreviewImage）
AAAXiaoApple的博客
03-23 2766
目前项目适用的逻辑是，提交 form表单 触发 onshow ，，编辑保存表单 不触发 onshow，
uniapp:如何实现点击图片可以全屏展示预览
m0_65069237的博客
11-22 2263
这个需要使用uniapp中的api：uni.previewImage，使用方法如下。这样就可以实现照片的预览和全屏展示了。
vue3图片预览插件.zip
06-14
vue3 发布之后，开始使用 vue3 + ts 写代码，需要使用图片预览插件，在 npm 找了一圈没有适合的。要么是 v2 的插件，要么是不支持 ts,要么是使用不方便，因此封装一个简单的图片预览插件。 内附使用说明 纯手打，...
MUI H5+ previewimage实现图片预览下载示例源码.zip
09-23
MUI H5+ previewimage实现图片预览下载示例源码.zip
微信小程序wx.previewImage预览图片实例详解
08-28
下面通过实例代码给大家讲解了微信小程序wx.previewImage预览图片功能,需要的朋友可以参考下
uniapp图片预览接口（uni.previewImage）黑屏问题处理
sfsgtc的博客
11-22 1509
uniapp图片预览接口（uni.previewImage）黑屏问题处理
uni-app点击预览图片
u012746918的博客
07-17 5402
uni-app点击预览图片
ImagePreview 图片预览 的使用​
m0_65812066的博客
01-08 4611
ImagePreview 是一个函数（必须使用按需到处），调用函数后会直接在页面中展示图片预览界面。4、在 img 点击事件处理函数中，调用 ImagePreview 预览。1、从文章内容中获取到所有的 img DOM 节点。3、遍历所有 img 节点，给每个节点注册点击事件。2、获取文章内容中所有的图片地址。二、处理图片点击预览。
uniapp实现当行多图片点击预览
请叫我欧皇！的博客
10-26 2343
1、首先要先显示当前行数据，tabData是私有的数据，里面包含了图片数据imgs_arr,imgs_arr的数据格式如下。我在图片点击事件传的是tabledata的item和图片的img！别传错了，不然就不能实现了。我在这遍历了图片数组，其中设置mage-table让图片可以在一排都显示。2、图片实现调用了uni的uni.previewImage的这个方法实现。本文主要讲述从表格数据当行中实现图片点击预览功能。
uniapp微信小程序 图片&文件上传并且支持图片和文件预览（pdf等文件预览）巨细教学！
柑橘乌云_
11-24 4676
这里要提一个bug就是说，这个组件设置v-model 后上传文件后，按道理再去读取这个v-model的值就应该是之前上传的文件数据，但是打印后并没有数据，而只有在点击删除文件后，再读取v-model才会有值，这个bug在社区很早就有人提出了，所以我采用通过监听select事件去手动存储文件数据，然后对应delete事件也删除数组中对应的文件数据。其次因为我项目中的需求是点击文件名字预览，那么文件的展示是手写的，组件原本的文件展示我用display：none隐藏掉了。
uni-app 预览图片
晨的一朵云的博客
01-30 3702
预览图片功能还不完全，未完全在各种移动设备上测试成功
uniapp写一个图片预览效果
qq_41956361的博客
04-12 3463
uniapp previewImage 突破预览
uni-app调用摄像头实时预览
09-10
在uni-app中调用摄像头实时预览可以通过以下步骤完成： 1. 在微信小程序中直接使用uni.chooseMedia即可调用微信相机进行摄录。但为了保持体验的相似性，可以自己开发一个微信相机的组件。 2. 打开项目的manifest.json文件，找到APP权限模块，并勾选相机权限和相册读写权限。 3. 在代码中使用uni.previewImage方法来预览图片，可以设置current参数为当前点击的图片路径，设置urls参数为图片列表的路径数组，设置loop参数为true以实现循环预览，设置indicator参数为"default"以显示底部圆点指示器。 例子代码如下： ``` <template> <view> <button type="warn" @click="chooseImg">上传图片</button> <image v-for="item in imgArr" :src="item" mode="" @click="previewImg(item)"></image> </view> </template> <script> export default { data() { return { imgArr: [] } }, methods: { chooseImg() { uni.chooseImage({ count: 5, success: res => { this.imgArr = res.tempFilePaths } }) }, previewImg(current) { uni.previewImage({ current, urls: this.imgArr, loop: true, indicator: "default" }) } } } </script> ``` 通过以上步骤，你可以在uni-app中实现调用摄像头实时预览的功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

WinFang5

good！

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

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

打赏作者

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

抵扣说明：

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

余额充值