swan.previewImage

解释: 预览图片。

# 方法参数

Object object

# object参数说明 :

属性名 类型 必填 默认值 说明
current String 当前显示图片的链接,不填则默认为 urls 的第一张。
urls Array.<string> 需要预览的图片链接列表
images Array.<object> - 支持原图的图片链接列表
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

# 示例

# 扫码体验

请使用百度APP扫码

# 图片示例

# 代码示例1 - 基本示例

在开发者工具中预览效果

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

# 代码示例2 - images属性

在开发者工具中预览效果

  • 在 swan 文件中
<view class="container">
    <view class="card-area">
        <view class="middle-image">
            <image src="https://b.bdstatic.com/miniapp/image/swan-preview-image-zip.png" mode="aspectFit" bindtap="previewOriginImage"></image>
        </view>
        <view class="tip-week">点击图片,预览大图, 并可查看原图</view>
    </view>
</view>
  • 在 js 文件中
Page({
    previewOriginImage() {
        swan.previewImage({
            current: 'https://b.bdstatic.com/miniapp/image/swan-preview-image-zip.png',
            urls: ['https://b.bdstatic.com/miniapp/image/swan-preview-image-zip.png'], 
            images: [
                {
                    "url": 'https://b.bdstatic.com/miniapp/image/swan-preview-image-zip.png', 
                    "origin_url": 'https://b.bdstatic.com/miniapp/image/swan-preview-image-origin.png'
                }
            ],
            success: res => {
                console.log('previewImage success', res);
            },
            fail: err => {
                console.log('previewImage fail', err);
            }
        });
    }
});

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

在开发者工具中预览效果

  • 在 swan 文件中
<view class="container">
    <view class="card-area">
        <view class="middle-image">
            <image src="https://b.bdstatic.com/miniapp/image/swan-preview-image-zip.png" mode="aspectFit" bindtap="previewOriginImage"></image>
        </view>
        <view class="tip-week">点击图片,预览大图, 并可查看原图</view>
    </view>
</view>
  • 在 js 文件中
Page({
    previewOriginImage() {
        swan.previewImage({
            current: 'https://b.bdstatic.com/miniapp/image/swan-preview-image-zip.png',
            urls: ['https://b.bdstatic.com/miniapp/image/swan-preview-image-zip.png','https://b.bdstatic.com/miniapp/image/swan-preview-image-2-zip.png'], 
            images: [
                {
                    "url": 'https://b.bdstatic.com/miniapp/image/swan-preview-image-zip.png', // 顺序需与urls中一致
                    "origin_url": 'https://b.bdstatic.com/miniapp/image/swan-preview-image-origin.png'
                },{
                    "url": 'https://b.bdstatic.com/miniapp/image/swan-preview-image-2-zip.png', // 顺序需与urls中一致
                    "origin_url": 'https://b.bdstatic.com/miniapp/image/swan-preview-image-2-zip.png'
                }
            ],
            success: res => {
                console.log('previewImage success', res);
            },
            fail: err => {
                console.log('previewImage fail', err);
            }
        });
    }
});

# 错误码

# Android

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

# iOS

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

# Bug&Tip

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