如何使用 uni.previewImage 预览图片？

推荐答案

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

本题详细解读

1. uni.previewImage 的作用

uni.previewImage 是 uni-app 提供的一个 API，用于在应用中预览图片。用户可以通过滑动查看多张图片，支持放大、缩小等操作。

2. 参数说明

• current：当前显示图片的链接。这个参数是可选的，如果不传，默认显示 urls 数组中的第一张图片。
• urls：需要预览的图片链接列表，类型为数组。至少要传入一张图片的链接。
• success：预览成功的回调函数。当用户成功打开图片预览时触发。
• fail：预览失败的回调函数。当图片预览失败时触发，通常是由于网络问题或图片链接无效。

3. 使用场景

• 在图片列表中，用户点击某张图片时，可以调用 uni.previewImage 来预览该图片及其相关的其他图片。
• 在商品详情页中，用户点击商品图片时，可以预览商品的多张图片。

4. 注意事项

• urls 数组中的图片链接必须是有效的，否则可能导致预览失败。
• 如果 current 参数传入的图片链接不在 urls 数组中，预览时可能会显示空白或错误。
• 在 H5 端，uni.previewImage 的实现依赖于浏览器的图片预览功能，因此在某些浏览器中可能会有兼容性问题。