当前位置：首页 > VUE

vue 实现图片预览

2026-02-17 14:56:04VUE

实现图片预览的方法

在Vue中实现图片预览功能可以通过多种方式完成，以下介绍几种常见的方法。

使用HTML5的FileReader API

通过FileReader API可以读取用户上传的图片文件并显示预览。

<template>
  <div>
    <input type="file" @change="previewImage" accept="image/*">
    <img v-if="imageUrl" :src="imageUrl" alt="Preview" style="max-width: 300px;">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: null
    }
  },
  methods: {
    previewImage(event) {
      const file = event.target.files[0]
      if (file && file.type.match('image.*')) {
        const reader = new FileReader()
        reader.onload = (e) => {
          this.imageUrl = e.target.result
        }
        reader.readAsDataURL(file)
      }
    }
  }
}
</script>

使用第三方库如viewer.js

viewer.js是一个功能强大的图片查看器库，可以与Vue集成。

安装viewer.js：

npm install viewerjs

使用示例：

vue 实现图片预览

<template>
  <div>
    <img v-for="src in images" :src="src" :key="src" @click="showViewer(src)">
    <div v-show="visible" class="image-viewer" @click="hideViewer">
      <img :src="currentImage">
    </div>
  </div>
</template>

<script>
import Viewer from 'viewerjs'
export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg'],
      visible: false,
      currentImage: '',
      viewer: null
    }
  },
  mounted() {
    this.viewer = new Viewer(document.querySelector('.image-viewer'))
  },
  methods: {
    showViewer(src) {
      this.currentImage = src
      this.visible = true
    },
    hideViewer() {
      this.visible = false
    }
  }
}
</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: 80%;
  max-height: 80%;
}
</style>

使用Element UI的图片组件

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

安装Element UI：

npm install element-ui

使用示例：

vue 实现图片预览

<template>
  <div>
    <el-upload
      action=""
      list-type="picture-card"
      :on-preview="handlePreview"
      :auto-upload="false">
      <i class="el-icon-plus"></i>
    </el-upload>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    handlePreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

使用Vue插件如vue-photo-preview

vue-photo-preview是专门为Vue设计的图片预览插件。

安装：

npm install vue-photo-preview

使用示例：

<template>
  <div>
    <img v-for="(item, index) in imgs" 
         :src="item.src" 
         :key="index" 
         v-preview="item.previewSrc">
  </div>
</template>

<script>
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'

export default {
  directives: { preview },
  data() {
    return {
      imgs: [
        { src: 'thumb1.jpg', previewSrc: 'large1.jpg' },
        { src: 'thumb2.jpg', previewSrc: 'large2.jpg' }
      ]
    }
  }
}
</script>

以上方法可以根据项目需求选择适合的方式实现图片预览功能。对于简单需求，FileReader API足够使用；对于更复杂的场景，可以考虑使用专门的图片预览库。