Implementation code of WeChat applet picture preview function

Image preview is a very common function. This article mainly introduces the image preview function of WeChat applet in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Rendering

Principle

• Use wx.chooseImage to select a local image;

• Use wx.previewImage to preview images.
  

##WXML

<view>
 <button bindtap="previewImage" type="primary">图片上传预览</button>
 <view class="tui-content"> 
  <image class="tui-preview-img" wx:for="{{previewImageArr}}" bindtap="changePreview" 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

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

Related recommendations:

AJAX method to implement image preview and upload and generate thumbnails

nodejs to implement image preview and Upload sample code

JQuery uses uploadView to implement the image preview upload function

The above is the detailed content of Implementation code of WeChat applet picture preview function. For more information, please follow other related articles on the PHP Chinese website!