swan.previewImage

解释： 预览图片。

方法参数

Object object

object参数说明 ：

属性名类型必填默认值说明
currentString否当前显示图片的链接，不填则默认为 urls 的第一张。
urlsArray.<string>是需要预览的图片链接列表
imagesArray.<object>否-支持原图的图片链接列表
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

示例

扫码体验

swan.previewImage - 图1请使用百度APP扫码

图片示例

swan.previewImage - 图2

swan.previewImage - 图3

swan.previewImage - 图4

代码示例1 - 基本示例

在开发者工具中预览效果

  • 在 swan 文件中
  1. <view class="container">
  2.     <view class="card-area">
  3.         <view class="top-image">
  4.             <image src="https://b.bdstatic.com/miniapp/image/swan-preview-image-2-zip.png" mode="widthFix" bindtap="previewImage"></image>
  5.         </view>
  6.         <view class="tip-week">点击图片，预览大图</view>
  7.     </view>
  8. </view>
  • 在 js 文件中
  1. Page({
  2.     previewImage() {
  3.         swan.previewImage({
  4.             current: 'https://b.bdstatic.com/miniapp/image/swan-preview-image-2-zip.png',
  5.             urls: ['https://b.bdstatic.com/miniapp/image/swan-preview-image-2-zip.png','https://b.bdstatic.com/miniapp/image/swan-preview-image-zip.png'], 
  6.             success: res => {
  7.                 console.log('previewImage success', res);
  8.             },
  9.             fail: err => {
  10.                 console.log('previewImage fail', err);
  11.             }
  12.         });
  13.     }
  14. });

代码示例2 - images属性

在开发者工具中预览效果

  • 在 swan 文件中
  1. <view class="container">
  2.     <view class="card-area">
  3.         <view class="middle-image">
  4.             <image src="https://b.bdstatic.com/miniapp/image/swan-preview-image-zip.png" mode="aspectFit" bindtap="previewOriginImage"></image>
  5.         </view>
  6.         <view class="tip-week">点击图片，预览大图, 并可查看原图</view>
  7.     </view>
  8. </view>
  • 在 js 文件中
  1. Page({
  2.     previewOriginImage() {
  3.         swan.previewImage({
  4.             current: 'https://b.bdstatic.com/miniapp/image/swan-preview-image-zip.png',
  5.             urls: ['https://b.bdstatic.com/miniapp/image/swan-preview-image-zip.png'], 
  6.             images: [
  7.                 {
  8.                     "url": 'https://b.bdstatic.com/miniapp/image/swan-preview-image-zip.png', 
  9.                     "origin_url": 'https://b.bdstatic.com/miniapp/image/swan-preview-image-origin.png'
  10.                 }
  11.             ],
  12.             success: res => {
  13.                 console.log('previewImage success', res);
  14.             },
  15.             fail: err => {
  16.                 console.log('previewImage fail', err);
  17.             }
  18.         });
  19.     }
  20. });

代码示例3 - 多个urls，images属性的使用

在开发者工具中预览效果

  • 在 swan 文件中
  1. <view class="container">
  2.     <view class="card-area">
  3.         <view class="middle-image">
  4.             <image src="https://b.bdstatic.com/miniapp/image/swan-preview-image-zip.png" mode="aspectFit" bindtap="previewOriginImage"></image>
  5.         </view>
  6.         <view class="tip-week">点击图片，预览大图, 并可查看原图</view>
  7.     </view>
  8. </view>
  • 在 js 文件中
  1. Page({
  2.     previewOriginImage() {
  3.         swan.previewImage({
  4.             current: 'https://b.bdstatic.com/miniapp/image/swan-preview-image-zip.png',
  5.             urls: ['https://b.bdstatic.com/miniapp/image/swan-preview-image-zip.png','https://b.bdstatic.com/miniapp/image/swan-preview-image-2-zip.png'], 
  6.             images: [
  7.                 {
  8.                     "url": 'https://b.bdstatic.com/miniapp/image/swan-preview-image-zip.png', // 顺序需与urls中一致
  9.                     "origin_url": 'https://b.bdstatic.com/miniapp/image/swan-preview-image-origin.png'
  10.                 },{
  11.                     "url": 'https://b.bdstatic.com/miniapp/image/swan-preview-image-2-zip.png', // 顺序需与urls中一致
  12.                     "origin_url": 'https://b.bdstatic.com/miniapp/image/swan-preview-image-2-zip.png'
  13.                 }
  14.             ],
  15.             success: res => {
  16.                 console.log('previewImage success', res);
  17.             },
  18.             fail: err => {
  19.                 console.log('previewImage fail', err);
  20.             }
  21.         });
  22.     }
  23. });

错误码

Android

错误码说明
202解析失败，请检查参数是否正确

iOS

错误码说明
202解析失败，请检查参数是否正确

Bug&Tip

  • 开发者工具 1.8.0 current 参数为当前显示图片的索引值。
  • 不支持预览本地文件。