当前位置：首页 > VUE

vue 实现图片预览

2026-03-09 03:23:50VUE

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>

自定义模态框实现

通过 Vue 的 v-if 和 CSS 实现简单的图片预览功能。

模板部分：

<template>
  <div>
    <img 
      v-for="(img, index) in images" 
      :src="img" 
      :key="index"
      @click="openPreview(img)"
    >

    <div class="preview-modal" v-if="showPreview">
      <div class="modal-content">
        <span class="close" @click="closePreview">&times;</span>
        <img :src="previewImage">
      </div>
    </div>
  </div>
</template>

脚本部分：

export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg'],
      showPreview: false,
      previewImage: ''
    }
  },
  methods: {
    openPreview(img) {
      this.previewImage = img
      this.showPreview = true
    },
    closePreview() {
      this.showPreview = false
    }
  }
}

样式部分：

.preview-modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.modal-content img {
  max-width: 90%;
  max-height: 90%;
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

使用 Element UI 的 Image 组件

如果项目中使用 Element UI，可以直接使用其 Image 组件实现预览功能。

安装 Element UI：

npm install element-ui

引入组件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

模板中使用：

vue 实现图片预览

<template>
  <el-image 
    v-for="(img, index) in images"
    :key="index"
    :src="img"
    :preview-src-list="images"
  >
  </el-image>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'image1.jpg',
        'image2.jpg'
      ]
    }
  }
}
</script>

以上方法提供了从简单到复杂的图片预览实现方案，可以根据项目需求选择合适的方案。v-viewer 功能最全面，自定义模态框最灵活，Element UI 的方案最适合使用该框架的项目。