uni.previewImage(options) @previewimage

名称	类型	必备	默认值	描述
current	any \| null	否	-	current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。
urls	Array<string.ImageURIString>	是	-	需要预览的图片链接列表
indicator	string \| null	否	-	图片指示器样式 - default: 底部圆点指示器 - number: 顶部数字指示器 - none: 不显示指示器
loop	boolean \| null	否	-	是否可循环预览
success	(callback: PreviewImageSuccess) => void \| null	否	-	接口调用成功的回调函数
fail	(callback: IMediaError) => void \| null	否	-	接口调用失败的回调函数
complete	(callback: any) => void \| null	否	-	接口调用结束的回调函数（调用成功、失败都会执行）

# PreviewImageSuccess 的属性值

名称	类型	必备	默认值	描述
errSubject	string	是	-	调用API的名称
errMsg	string	是	-	描述信息

# IMediaError 的属性值

名称	类型	必备	默认值	描述
errCode	1101001 \| 1101002 \| 1101003 \| 1101004 \| 1101005 \| 1101006 \| 1101007 \| 1101008 \| 1101009 \| 1101010	是	-	错误码 - 1101001 用户取消 - 1101002 urls至少包含一张图片地址 - 1101003 文件不存在 - 1101004 图片加载失败 - 1101005 未获取权限 - 1101006 图片或视频保存失败 - 1101007 图片裁剪失败 - 1101008 拍照或录像失败 - 1101009 图片压缩失败 - 1101010 其他错误
errSubject	string	是	-	统一错误主题（模块）名称
data	any \| null	否	-	错误信息中包含的数据
cause	Error \| null	否	-	源错误信息，可以包含多个错误，详见SourceError
errMsg	string	是	-	-

# previewImage 兼容性

Android	iOS	web
3.9	4.11	4.0

# 参见

参见uni-app相关文档

# uni.closePreviewImage(options)

关闭图片预览

# 参数

名称

类型

必填

默认值

描述

options

ClosePreviewImageOptions

是

名称	类型	必备	默认值	描述
success	(callback: ClosePreviewImageSuccess) => void \| null	否	-	接口调用成功的回调函数
fail	(callback: IMediaError) => void \| null	否	-	接口调用失败的回调函数
complete	(callback: any) => void \| null	否	-	接口调用结束的回调函数（调用成功、失败都会执行）

# ClosePreviewImageSuccess 的属性值

名称	类型	必备	默认值	描述
errMsg	string	是	-	错误信息

# IMediaError 的属性值

名称	类型	必备	默认值	描述
errCode	1101001 \| 1101002 \| 1101003 \| 1101004 \| 1101005 \| 1101006 \| 1101007 \| 1101008 \| 1101009 \| 1101010	是	-	错误码 - 1101001 用户取消 - 1101002 urls至少包含一张图片地址 - 1101003 文件不存在 - 1101004 图片加载失败 - 1101005 未获取权限 - 1101006 图片或视频保存失败 - 1101007 图片裁剪失败 - 1101008 拍照或录像失败 - 1101009 图片压缩失败 - 1101010 其他错误
errSubject	string	是	-	统一错误主题（模块）名称
data	any \| null	否	-	错误信息中包含的数据
cause	Error \| null	否	-	源错误信息，可以包含多个错误，详见SourceError
errMsg	string	是	-	-

# closePreviewImage 兼容性

Android	iOS	web
3.9	4.11	-

# 参见

参见uni-app相关文档

# 示例

hello uni-app x

Template

Script

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view style="padding-left: 8px; padding-right: 8px">
      <view>
        <text class="text-desc">图片指示器样式</text>
        <radio-group class="cell-ct" style="background-color: white" @change="onIndicatorChanged">
          <view class="indicator-it" v-for="(item, index) in indicator" :key="item.value">
            <radio :checked="index == 0" :value="item.value">{{
              item.name
            }}</radio>
          </view>
        </radio-group>
      </view>
      <view>
        <checkbox-group @change="onCheckboxChange" style="margin-top: 16px; margin-bottom: 16px; margin-left: 8px">
          <checkbox :checked="isLoop" style="margin-right: 15px">循环播放</checkbox>
        </checkbox-group>
      </view>
      <view style="background-color: white">
        <text class="text-desc">点击图片开始预览</text>
        <view class="cell-ct" style="margin: 8px;">
          <view class="cell cell-choose-image" v-for="(image, index) in imageList" :key="index">
            <image style="width: 100px; height: 100px" mode="aspectFit" :src="image" @click="previewImage(index)">
            </image>
          </view>
          <image class="cell cell-choose-image" src="/static/plus.png" @click="chooseImage">
            <view></view>
          </image>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>



<style>
  .text-desc {
    margin-top: 16px;
    margin-left: 8px;
    margin-bottom: 16px;
    font-weight: bold;
  }

  .cell-ct {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }

  .cell {
    margin-left: 3px;
    margin-right: 3px;
    width: 100px;
    height: 100px;
  }

  .cell-choose-image {
    border-width: 1px;
    border-style: solid;
    border-color: lightgray;
  }

  .indicator-it {
    margin: 8px;
  }
</style>