`uni.previewImage` 是一个用于预览图片的 uni-app API,允许用户在全屏模式下查看一张或多张图片。

1,665 阅读1分钟

uni.previewImage 是一个用于预览图片的 uni-app API,允许用户在全屏模式下查看一张或多张图片。

使用说明

通过此接口,可以实现点击图片进行放大预览的功能,这在构建图库或查看图片详情时非常有用。

API 结构

uni.previewImage({
    current: '', // 当前显示图片的链接,不填则默认为 urls 的第一张
    urls: [], // 需要预览的图片链接列表
    success: function (res) {
        console.log('预览图片成功');
    },
    fail: function (err) {
        console.error('预览图片失败:', err);
    },
    complete: function () {
        console.log('预览图片调用完毕,无论成功或失败都会执行');
    }
});

参数说明

  • current:当前显示的图片链接,默认为空,此时会从 urls 列表的第一张开始显示。
  • urls:要预览的图片链接列表,数组形式。
  • success:接口调用成功的回调函数。
  • fail:接口调用失败的回调函数。
  • complete:接口调用结束的回调函数(调用成功、失败都会执行)。

示例代码

uni.previewImage({
    current: 'https://example.com/image1.png', // 当前显示的图片链接
    urls: [ // 需要预览的图片链接列表
        'https://example.com/image1.png',
        'https://example.com/image2.png',
        'https://example.com/image3.png'
    ],
    success: function (res) {
        console.log('预览图片成功');
    },
    fail: function (err) {
        console.error('预览图片失败:', err);
    },
    complete: function () {
        console.log('预览图片调用完毕');
    }
});

在调用此 API 时,需要保证传入的图片链接可访问,且列表中的图片链接应为网络图片或应用包内的图片路径。

有关详细信息,请查阅 uni-app 官方文档