当前位置：首页 > VUE

vue 实现预览图片

2026-03-09 02:30:56VUE

Vue 实现图片预览功能

使用 Vue 实现图片预览功能可以通过多种方式完成，以下提供几种常见方法。

使用第三方库（如 v-viewer）

v-viewer 是一个基于 viewer.js 的 Vue 图片预览组件，支持缩放、旋转等功能。

安装 v-viewer：

npm install v-viewer

在组件中使用：

<template>
  <div>
    <img v-for="src in images" :src="src" :key="src" @click="showViewer">
    <viewer :images="images" ref="viewer">
      <template slot-scope="scope">
        <img v-for="src in scope.images" :src="src" :key="src">
      </template>
    </viewer>
  </div>
</template>

<script>
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'

export default {
  components: {
    Viewer
  },
  data() {
    return {
      images: [
        'image1.jpg',
        'image2.jpg'
      ]
    }
  },
  methods: {
    showViewer() {
      this.$refs.viewer.$viewer.show()
    }
  }
}
</script>

自定义模态框实现

通过自定义模态框可以实现简单的图片预览功能。

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

    <div v-if="showModal" class="preview-modal" @click="closePreview">
      <img :src="currentImage" class="preview-image">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg'],
      showModal: false,
      currentImage: ''
    }
  },
  methods: {
    openPreview(src) {
      this.currentImage = src
      this.showModal = true
    },
    closePreview() {
      this.showModal = false
    }
  }
}
</script>

<style>
.preview-thumbnail {
  width: 100px;
  height: 100px;
  cursor: pointer;
  margin: 5px;
}

.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;
  z-index: 1000;
}

.preview-image {
  max-width: 90%;
  max-height: 90%;
}
</style>

使用 Element UI 的 Image 组件

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

安装 Element UI：

npm install element-ui

使用示例：

vue 实现预览图片

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

<script>
import { Image } from 'element-ui'

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