uni-app-x

展示全部

# uni.previewImage(options) GitCode GitHub

预览图片

# previewImage 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
4.0	4.41	3.9	4.11	4.61

# 参数

名称

类型

必填

默认值

兼容性

描述

options

PreviewImageOptions

是

名称

类型

必备

默认值

兼容性

描述

current

any

否

current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。

urls

Array<string.ImageURIString>

是

需要预览的图片链接列表

showmenu

boolean

否

是否显示长按菜单

indicator

"default" | "number" | "none"

否

图片指示器样式

loop

boolean

否

是否可循环预览

longPressActions

LongPressActionsOptions

否

长按图片显示操作菜单。

名称

类型

必备

默认值

兼容性

描述

itemList

Array<string>

是

按钮的文字数组

itemColor

string

否

按钮的文字颜色，字符串格式，默认为"#000000"

success

(result: LongPressActionsSuccessResult) => void

否

接口调用成功的回调函数

fail

(result: IMediaError) => void

否

接口调用失败的回调函数

complete

(result: any) => void

否

接口调用结束的回调函数（调用成功、失败都会执行）

success

(callback: PreviewImageSuccess) => void

否

接口调用成功的回调函数

fail

(callback: IMediaError) => void

否

接口调用失败的回调函数

complete

(callback: any) => void

否

接口调用结束的回调函数（调用成功、失败都会执行）

# LongPressActionsSuccessResult 的属性值

名称

类型

必备

默认值

兼容性

描述

tapIndex

number

是

接口调用失败的回调函数

index

number

是

接口调用结束的回调函数（调用成功、失败都会执行）

# IMediaError 的属性值

名称

类型

必备

默认值

兼容性

描述

errCode

number

是

错误码

合法值

兼容性

描述

1101001

用户取消

1101002

urls至少包含一张图片地址

1101003

文件不存在

1101004

图片加载失败

1101005

未获取权限

1101006

图片或视频保存失败

1101007

图片裁剪失败

1101008

拍照或录像失败

1101009

图片压缩失败

1101010

其他错误

errSubject

string

是

统一错误主题（模块）名称

data

any

否

错误信息中包含的数据

cause

Error

否

源错误信息，可以包含多个错误，详见SourceError

errMsg

string

是

# PreviewImageSuccess 的属性值

名称

类型

必备

默认值

兼容性

描述

errSubject

string

是

调用API的名称

errMsg

string

是

描述信息

# 示例

示例为 alpha 分支：hello uni-app x（alpha）

master 分支：hello uni-app x（master）

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 :disabled="isWeb" :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 :disabled="isWeb" :checked="isLoop" style="margin-right: 15px">循环播放</checkbox>
        </checkbox-group>
      </view>
      <view>
        <checkbox-group @change="onLongPressCheckboxChange"
          style="margin-top: 16px; margin-bottom: 16px; margin-left: 8px">
          <checkbox :disabled="isWeb" :checked="isLongPress" 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">
            <text style="width: 100px; height: 100px;background-color: lightgray; color: red; text-align: center; line-height: 100px;font-size: 14px;" v-if="image.error"
              @click="previewImage(index)">图片路径非法</text>
            <image style="width: 100px; height: 100px;background-color: white;" mode="aspectFit" :src="image.src"
              v-if="!image.error" @click="previewImage(index)"
              @error="onImageLoadError(index,$event as ImageErrorEvent)">
            </image>
          </view>
          <image class="cell cell-choose-image" src="/static/plus.png" @click="chooseImage">
            <view></view>
          </image>
        </view>
      </view>
      <view style="margin:8px;">
        <text style="color: black;font-size: 18px;margin-bottom: 4px;">注意事项:</text>
        <text style="font-size: 17px;margin-left: 4px;color: darkgray;">1、indicator属性仅App平台支持。</text>
        <text style="font-size: 17px;margin-left: 4px;color: darkgray;">2、Web平台不支持loop属性。</text>
      </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;
  }
  .cell-pd {
    padding: 11px 0px;
  }
</style>

# 参见

# 开源自定义

内置的previewImage弹出的界面，无法充分自定义。所以uni-app x提供了开源的previewImage页面，开发者可以自己定义UI。

开源插件地址：https://ext.dcloud.net.cn/plugin?id=21314

这个插件是ext api，下载到项目下会覆盖uni.previewImage的实现。

单独下载开源插件后，调用uni.previewImage，会在栈顶页面打开一个dialogPage，在父页面的getDialogPages中可以看到。使用内置的uni.previewImage看不到。

该开源插件目前仅支持Android。后续会补充其他平台。

# uni.closePreviewImage(options) GitCode GitHub

关闭图片预览

# closePreviewImage 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
4.0	4.41	3.9	4.11	4.61

# 参数

名称

类型

必填

默认值

兼容性

描述

options

ClosePreviewImageOptions

是

名称

类型

必备

默认值

兼容性

描述

success

(callback: ClosePreviewImageSuccess) => void

否

接口调用成功的回调函数

fail

(callback: IMediaError) => void

否

接口调用失败的回调函数

complete

(callback: any) => void

否

接口调用结束的回调函数（调用成功、失败都会执行）

# ClosePreviewImageSuccess 的属性值

名称

类型

必备

默认值

兼容性

描述

errMsg

string

是

错误信息

# IMediaError 的属性值

名称

类型

必备

默认值

兼容性

描述

errCode

number

是

错误码

合法值

兼容性

描述

1101001

用户取消

1101002

urls至少包含一张图片地址

1101003

文件不存在

1101004

图片加载失败

1101005

未获取权限

1101006

图片或视频保存失败

1101007

图片裁剪失败

1101008

拍照或录像失败

1101009

图片压缩失败

1101010

其他错误

errSubject

string

是

统一错误主题（模块）名称

data

any

否

错误信息中包含的数据

cause

Error

否

源错误信息，可以包含多个错误，详见SourceError

errMsg

string

是

# 参见

# 通用类型

# GeneralCallbackResult

名称

类型

必备

默认值

兼容性

描述

errMsg

string

是

错误信息

运营产品

uni-ad uni统计 uni发行 uni安全专题

开发者服务

问答社区开发者后台

技术文档

uni-app文档 uniCloud文档原生开发者支持文档 HBuilder文档

生态服务

插件市场 OAuth用户开放平台

关于我们： DCloud官网案例需求墙许可协议加入我们赞助我们

联系我们：商务合作：bd@dcloud.io 广告合作：uniad@dcloud.io

DCloud.io 数字天堂（北京）网络技术有限公司是

HTML5中国产业联盟发起单位

京公网安备：11010802035340号

国家信息安全等级保护三级，证书编号：11010813802-20001

# uni.previewImage(options) GitCode GitHub

# previewImage 兼容性

# 参数

# LongPressActionsSuccessResult 的属性值

# IMediaError 的属性值

# PreviewImageSuccess 的属性值

# 示例

# 参见

# 开源自定义

# uni.closePreviewImage(options) GitCode GitHub

# closePreviewImage 兼容性

# 参数

# ClosePreviewImageSuccess 的属性值

# IMediaError 的属性值

# 参见

# 通用类型

# GeneralCallbackResult

本页导读