How to use wx.previewImage to preview images in WeChat applet

The following uses example code to explain the WeChat applet wx.previewImage preview image function. Friends who need it can refer to it

1. Little knowledge

##2. Example

1.wxml

<span style="font-family:Comic Sans MS;font-size:18px;color:#333333;"><view class="container"> 
 <view wx:for="{{imgalist}}" wx:for-item="image" class="previewimg"> 
  <image src="{{image}}" src="{{image}}" bindtap="previewImage"></image> 
 </view> 
</view></span>

2.wxss

<span style="font-family:Comic Sans MS;font-size:18px;color:#333333;">.container { 
 box-sizing:border-box; 
 padding:20px; 
} 
.previewimg{ 
 float:left; 
 width:45%; 
 height:200px; 
 margin:2%; 
} 
.previewimg image{ 
 width:100%; 
 height:100%; 
}</span>

3.js

Graphic using the network

<span style="font-family:Comic Sans MS;font-size:18px;color:#333333;">var app = getApp() 
Page({ 
 data: { 
  imgalist:[ &#39;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&#39;, 
  &#39;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&#39;, 
  &#39;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&#39;, 
  &#39;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&#39; 
 ]}, 
 /** 
  * 预览图片 
  */ 
 previewImage: function (e) { 
  var current=e.target.dataset.src; 
  wx.previewImage({ 
   current: current, // 当前显示图片的http链接 
   urls: this.data.imgalist // 需要预览的图片http链接列表 
  }) 
 } 
})</span>

Use local images:

<span style="font-family:Comic Sans MS;font-size:18px;color:#333333;">var app = getApp() 
Page({ 
 data: { 
  imgalist:[ &#39;../uploads/a01.jpg&#39;, 
  &#39;../uploads/a02.jpg&#39;, 
  &#39;../uploads/a03.jpg&#39;, 
  &#39;../uploads/foods.jpg&#39; 
 ]}, 
 /** 
  * 预览图片 
  */ 
 previewImage: function (e) { 
  var current=e.target.dataset.src; 
  wx.previewImage({ 
   current: current, // 当前显示图片的http链接 
   urls: this.data.imgalist // 需要预览的图片http链接列表 
  }) 
 } 
}) 
</span>

So this interface, according to the official example, may only support the network image address of http or https protocol.

Note:

It is also said on the Internet that local pictures are indeed not allowed. You can preview them later by selecting the photos in the mobile phone album, provided that It is demonstrated on a real machine.

The following is an introduction to the WeChat applet: click on the preview image

When developing the WeChat applet, Developers will refer to the mini program API to develop mini programs, but sometimes bugs are prone to occur depending on the situation. The following are various bugs that occurred when I was developing mini programs. I need to preview pictures during development.

1.xml

 <view class=&#39;detail_img&#39;>
  <view class=&#39;view_img&#39; wx:for="{{imglist}}" wx:for-item="image">
   <image src=&#39;{{image}}&#39; src="{{image}}" bindtap="previewImage"></image>
   </view>
  <view style=&#39;clear:both;&#39;></view>
  </view>

2.js

data: {
 imglist:['图片链接','图片链接','图片链接']
 },

/** 
  * 预览图片 
  */
 previewImage: function (e) {
 var current = e.target.dataset.src;
 wx.previewImage({
  current: current, // 当前显示图片的http链接 
  urls: this.data.imglist // 需要预览的图片http链接列表 
 })
 } ,

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use the swiper mobile carousel plug-in

##How to implement the switching arrow button in the swiper plug-in

How to implement the side sliding menu effect in vue swiper

How to implement the triangular arrow labeling function using Angular

How to use the Generator method in JavaScript

How to change the avatar in node

The above is the detailed content of How to use wx.previewImage to preview images in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!