当前位置：首页 > VUE

vue实现图片查看

2026-03-28 06:07:51VUE

Vue 实现图片查看功能

使用第三方库（推荐）

推荐使用 v-viewer 或 vue-photo-preview 这类专门为 Vue 设计的图片查看库，它们支持缩放、旋转、滑动查看等功能。

安装 v-viewer：

npm install v-viewer

在 Vue 项目中引入并使用：

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)

在模板中使用：

<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',
        'image3.jpg'
      ]
    }
  }
}
</script>

自定义实现图片查看器

如果需要自定义功能，可以通过 Vue 的指令和组件实现基础功能。

创建图片查看组件：

<template>
  <div class="image-viewer" v-if="visible" @click.self="close">
    <img :src="currentImage" @click.stop>
    <button @click="close">关闭</button>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    currentImage: String
  },
  methods: {
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style>
.image-viewer {
  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: 9999;
}
.image-viewer img {
  max-width: 90%;
  max-height: 90%;
}
</style>

实现图片预览列表

结合缩略图列表实现点击预览功能：

<template>
  <div>
    <div class="thumbnail-list">
      <img 
        v-for="(img, index) in images" 
        :src="img.thumbnail" 
        :key="index"
        @click="openViewer(img.full)">
    </div>
    <image-viewer 
      :visible="viewerVisible" 
      :current-image="currentImage"
      @close="viewerVisible = false">
    </image-viewer>
  </div>
</template>

<script>
import ImageViewer from './ImageViewer.vue'

export default {
  components: { ImageViewer },
  data() {
    return {
      images: [
        { thumbnail: 'thumb1.jpg', full: 'full1.jpg' },
        { thumbnail: 'thumb2.jpg', full: 'full2.jpg' }
      ],
      viewerVisible: false,
      currentImage: ''
    }
  },
  methods: {
    openViewer(img) {
      this.currentImage = img
      this.viewerVisible = true
    }
  }
}
</script>

添加过渡动画

为图片查看器添加显示/隐藏的过渡效果：

<transition name="fade">
  <image-viewer v-if="viewerVisible" ...></image-viewer>
</transition>

添加 CSS 过渡样式：

.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

响应式图片处理

确保图片在不同设备上显示正常：

.image-viewer img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

键盘导航支持

添加键盘事件监听实现图片切换：

vue实现图片查看

mounted() {
  window.addEventListener('keyup', this.handleKeyup)
},
beforeDestroy() {
  window.removeEventListener('keyup', this.handleKeyup)
},
methods: {
  handleKeyup(e) {
    if (!this.viewerVisible) return
    if (e.key === 'Escape') this.close()
    if (e.key === 'ArrowRight') this.next()
    if (e.key === 'ArrowLeft') this.prev()
  }
}