WeChat applets enable image preview and Wechat applets

The mini-program implements the image preview function and the mini-program image preview function.

This article shares with you the specific code of the applet for image preview. The specific content is as follows:

Principle

• Use wx. chooseImage to select a local image;
• Use wx. previewImage to preview an image.
  

WXML

<View> <button bindtap = "previewImage" type = "primary"> image Upload preview </button> <view class = "tui-content"> <image class = "tui- preview-img "wx: for = "{previewImageArr}" bindtap = "changePreview" data-src = "{item}" src = "{item}"> </image> </view> </view>

WXSS

page{background-color: #efeff4;}.tui-preview-img{ width: 200rpx; height: 120rpx;}

JS

Page({ data: {  previewImageArr:[] }, previewImage(e){  var self = this;  wx.chooseImage({   count:8,   success(res) {    var tempFilePaths = res.tempFilePaths;    self.setData({ previewImageArr: tempFilePaths});   }  }) }, changePreview(e){  var self = this;  wx.previewImage({   current: e.currentTarget.dataset.src,   urls: self.data.previewImageArr  }) }})

Note:

The current and urls parameters of wx. previewImage must be http links.

Download DEMO

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.