更新记录

1.0.2（2025-04-27） 下载此版本

将示例页面pages/index/index移动到pages/zoe-picPreview/index

1.0.0（2025-04-27） 下载此版本

uniapp图片预览案例1.0，引入插件使用时请注意阅读说明，注意引用路径，图片路径是否正确。如有疑问可直接下载完整案例包查看

平台兼容性

uni-app

zoe-picPreview

图片预览插件

单图预览和多图预览 使用方式

import ImagePreview from '@/components/image-preview/index.vue';//注意路径是否正确
//单图预览  mainImage为你的图片路径
<image-preview 
  :imageUrl="mainImage" 
  class="main-image" 
/>
//多图预览  imageUrl为显示的图片  imageList为图片列表
<image-preview 
  :imageUrl="thumbnails[0]" 
  :imageList="thumbnails"
  class="main-image" 
/>

//变量例如：
mainImage: '/static/shatang.jpg',
thumbnails: [
  '/static/xinhai.png',
  '/static/ganyu.png',
  '/static/fuxuan.jpg',
  '/static/shatang.jpg'
]

//使用插件页面需要引用的css
.main-image {
  width: 100%;
  height: 400px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

需要的授权

无

备注

源码案例地址：请下载完整示例