vue前端实现图片预览
使用 v-viewer 插件实现图片预览
v-viewer 是一个基于 Viewer.js 的 Vue 图片预览组件，支持缩放、旋转、拖拽等功能。
安装依赖：
npm install v-viewer在 Vue 项目中引入并注册插件：
import VueViewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(VueViewer)在模板中使用：
<template>
<div>
<img v-for="src in images" :src="src" :key="src" v-viewer>
</div>
</template>
<script>
export default {
data() {
return {
images: ['image1.jpg', 'image2.jpg']
}
}
}
</script>点击图片即可预览，支持多图切换。
使用 el-image 组件（Element UI）
如果项目基于 Element UI，可以直接使用其内置的 el-image 组件实现预览功能。
安装 Element UI：
npm install element-ui引入组件并配置：
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)在模板中使用：
<template>
<el-image
:src="imageUrl"
:preview-src-list="[imageUrl]"
fit="cover">
</el-image>
</template>
<script>
export default {
data() {
return {
imageUrl: 'image1.jpg'
}
}
}
</script>通过 preview-src-list 指定预览的图片列表，支持多图切换。
自定义实现图片预览
通过动态渲染弹窗和图片，实现基础的预览功能。
模板部分：
<template>
<div>
<img
v-for="src in images"
:src="src"
:key="src"
@click="showPreview(src)">
<div v-if="isPreviewVisible" class="preview-modal">
<img :src="previewImage" class="preview-image">
<button @click="closePreview">关闭</button>
</div>
</div>
</template>脚本部分：
<script>
export default {
data() {
return {
images: ['image1.jpg', 'image2.jpg'],
isPreviewVisible: false,
previewImage: ''
}
},
methods: {
showPreview(src) {
this.previewImage = src
this.isPreviewVisible = true
},
closePreview() {
this.isPreviewVisible = false
}
}
}
</script>样式部分：
<style>
.preview-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
}
.preview-image {
max-width: 80%;
max-height: 80%;
}
</style>通过控制 isPreviewVisible 显示/隐藏预览弹窗。
使用 vue-photo-preview 插件
轻量级的图片预览插件，适合简单场景。
安装依赖：
npm install vue-photo-preview引入插件：
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)在模板中直接为图片添加 preview 属性：
<img src="image.jpg" preview="preview-name">点击图片即可触发预览，支持分组预览（通过相同的 preview 值）。
