Vue-preview 图片预览：新手安装与上手完整指南
【免费下载链接】vue-previewA Vue Integrated PhotoSwipe Image Preview Plugin项目地址: https://gitcode.com/gh_mirrors/vu/vue-preview
Vue-preview 是一个基于 Vue.js 的图片预览插件，封装了 PhotoSwipe 图片查看器，让缩略图列表快速拥有滑动换图、手势缩放等效果，适合需要做移动端图片画廊展示的人。这篇 Vue-preview 安装指南带你几分钟内跑起来。
它到底能干什么
插件把 Vue.js 组件和 PhotoSwipe（一个支持触摸手势的图片查看器 JS 库）封装到一起：你在页面上放一排缩略图，点击任意一张就弹出全屏预览。
特性要点：
- 滑动换图：手机上左右滑动即可切换上一张 / 下一张
- 手势缩放：双指开合放大缩小，体验接近系统相册
- 位置指示：预览时显示当前是第几张图
- 点击关闭：点一下空白处即可退出预览
开始前确认这两样
- Node.js：运行 JavaScript 的环境，建议装 LTS 版本，执行
node -v可确认已安装 - npm 或 yarn：依赖管理器，随 Node.js 自带（yarn 需另装），用来安装 Vue 和插件依赖
最快上手：4 步跑通
第 1 步：克隆仓库
执行：
git clone https://gitcode.com/gh_mirrors/vu/vue-preview把 Vue-preview 源码下载到本地。
第 2 步：进入项目目录
cd vue-preview切换到项目根目录，后面的命令都在这里执行。
第 3 步：安装依赖
npm install习惯用 yarn 的话执行yarn install，作用相同：装好 Vue 2.5、PhotoSwipe 等全部依赖。
第 4 步：引入插件
打开src/main.js，加两行：
import VuePreview from 'vue-preview'; Vue.use(VuePreview);这会把vue-preview组件全局注册，之后任何组件都能直接用。
在组件里用起来
在模板里放一个<vue-preview>，把缩略图数据通过slides传进去：
<template> <div class="my-gallery"> <vue-preview :slides="thumbs"></vue-preview> </div> </template> <script> export default { data () { return { thumbs: [ { src: 'big/1.jpg', msrc: 'thumb/1.jpg', alt: '图1', w: 1200, h: 800 }, { src: 'big/2.jpg', msrc: 'thumb/2.jpg', alt: '图2', w: 1600, h: 900 } ] } } } </script>如何配置 slides 数据
slides是一个数组，每一项对应一张图，各字段含义如下：
| 字段 | 含义 | 说明 |
|---|---|---|
| src | 大图地址 | 预览时展示的原图 |
| msrc | 小图地址 | 加载占位和缩放动画用的缩略图 |
| alt | 替代文本 | 图片加载失败时显示的文字 |
| w / h | 图片宽高 | 真实像素值，用于计算缩放动画 |
| title | 图片标题 | 可选，显示在预览底部 |
常见坑，提前避开
- 缺 msrc 导致预览异常：打开预览时画面空白或缩略图定位错乱。给每张图片都配一张低分辨率小图，宽高比与 src 保持一致即可。
- w / h 填错，缩放会跳：宽高和真实尺寸不符时，放大缩小动画会瞬间跳变。用图片工具量出真实像素再填。
- 图片跨域加载失败：图片挂在别的域名下可能被浏览器拦截。把图片放到同域，或给图片服务器加上 CORS 响应头。
总结
按上面 4 步装好依赖、注册插件，Vue-preview 图片预览就能在你的项目里跑起来了；更多配置项可以查看项目里的 README.md。
【免费下载链接】vue-previewA Vue Integrated PhotoSwipe Image Preview Plugin项目地址: https://gitcode.com/gh_mirrors/vu/vue-preview
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
