微信小程序wx.previewImage预览图片 2021-09-12 07:30 454阅读 0赞 一.小知识 ![20170525131248116][] 二.例子 1.wxml <view class="container"> <view wx:for="{ {imgalist}}" wx:for-item="image" class="previewimg"> <image src="{ {image}}" data-src="{ {image}}" bindtap="previewImage"></image> </view> </view> 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left; width:45%; height:200px; margin:2%; } .previewimg image{ width:100%; height:100%; } 3.js 使用网络的图 var app = getApp() Page({ data: { imgalist:[ 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1496287851&di=0a26048f586b8521 93cb5026d60c4fad&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F12%2F74%2F05%2F99C58PICYck.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495693185413&di=0d0acdebf0f532edd0fcdb7 6265623c5&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2Fimg013%2Fv3%2F2%2Fd%2F61.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495693185413&di=55835ae37fdc95a317b03f28162c0 de1&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201307%2F12%2F20130712224237_nSjht.jpeg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495693185410&di=e28cc03d2ae84130eabc2 6bf0fc7495f&imgtype=0&src=http%3A%2F%2Fpic36.photophoto.cn%2F20150814%2F0005018308986502_b.jpg' ]}, /** * 预览图片 */ previewImage: function (e) { var current=e.target.dataset.src; wx.previewImage({ current: current, // 当前显示图片的http链接 urls: this.data.imgalist // 需要预览的图片http链接列表 }) } }) ![20170525114340413][] 使用本地的图片: var app = getApp() Page({ data: { imgalist:[ '../uploads/a01.jpg', '../uploads/a02.jpg', '../uploads/a03.jpg', '../uploads/foods.jpg' ]}, /** * 预览图片 */ previewImage: function (e) { var current=e.target.dataset.src; wx.previewImage({ current: current, // 当前显示图片的http链接 urls: this.data.imgalist // 需要预览的图片http链接列表 }) } }) ![20170525130852030][] 所以这个接口, 按照官方示例, 可能只支持 `http` 或者 `https` 协议的网络图片地址. 注意: 网上还有说本地图片确实是不可以的,后面通过选取手机相册内的照片,可以预览,前提是在真机上演示。 ![20170525131559273][] 由于我没有获取APPID,所以无法再真机上演示,所以先附上代码,后期再做详解。 [20170525131248116]: /images/20210813/291d9512f659435189ebccb091ed4ecc.png [20170525114340413]: /images/20210813/1aaaa1d1abc5409e841bacba02f14541.png [20170525130852030]: /images/20210813/f076a2a1ccba46ef9b1329d8b23803f9.png [20170525131559273]: /images/20210813/3ff42cdc856d421ca7aa1ef7b321b929.png
相关 uniapp 微信小程序的上传图片与预览图片 ![在这里插入图片描述][20201211092210850.png] uni.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照。 ![在这里 野性酷女/ 2022年12月27日 12:45/ 0 赞/ 58 阅读
相关 微信小程序点击单个图片进行预览图片,点击预览pdf文件 这里介绍的是单个图片点击预览的,也可以多张,方法差不多 index.wxml <view class="page"> <view class="pag 待我称王封你为后i/ 2022年12月10日 08:55/ 0 赞/ 498 阅读
相关 微信图片预览 微信公众号开发中,点击查看大图, 其实不需要再写js效果直接调用微信app的预览功能即可 用例: <script> //图片列表 男娘i/ 2022年08月04日 13:47/ 0 赞/ 246 阅读
相关 微信小程序图片预览保存发送给朋友previewImage 先看看手机上的效果 ![这里写图片描述][SouthEast] js实现的代码: wx.previewImage({ curren 逃离我推掉我的手/ 2022年06月01日 03:08/ 0 赞/ 159 阅读
相关 微信小程序实现弹窗预览图片 今天要实现,点击实现预览图片的功能,看了网上的解决方案,都不太满意,于是自己写了一个.用到了zan-ui的弹窗样式,要引入zan-ui的框架,不会的话,可以看这篇文章 [微信 梦里梦外;/ 2022年05月28日 10:59/ 0 赞/ 492 阅读
相关 微信小程序之图片选择/上传/预览/删除 微信小程序选择图片、预览图片、长按删除图片以及上传图片。 wxml部分: <view class='imgs'> <block wx:for="{ 悠悠/ 2022年05月04日 01:58/ 0 赞/ 839 阅读
相关 微信小程序:点击图片预览 做微信小程序的时候使用的图片大小不尽相同,为了让使用者能够浏览原图,就需要给图片添加点击预览的功能,下面我详细介绍一下实现步骤, 首先介绍微信小程序文档中的使用教程: ![ 妖狐艹你老母/ 2022年04月03日 03:14/ 0 赞/ 418 阅读
相关 微信小程序 实现上传图片并可以预览图片 我的qq 2038373094 我做的是微信小程序、网站、手机app,后端java+前端vue、bootstrap框架、原生的html+css+js都会 做过律师在线咨 刺骨的言语ヽ痛彻心扉/ 2022年01月28日 10:05/ 0 赞/ 336 阅读
相关 微信小程序选择图片和预览图片 选择图片 视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片. wx.chooseImage(\{\}) 此方法是用来选择图片的方法,具体使用 素颜马尾好姑娘i/ 2021年09月17日 00:28/ 0 赞/ 471 阅读
相关 微信小程序wx.previewImage预览图片 一.小知识 ![20170525131248116][] 二.例子 1.wxml <view class="container"> <view wx:fo ゞ 浴缸里的玫瑰/ 2021年09月12日 07:30/ 0 赞/ 455 阅读
还没有评论,来说两句吧...