当前位置：首页 > VUE

vue 实现图片预览

2026-01-16 22:23:08VUE

实现图片预览功能

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

使用HTML5的FileReader API

通过FileReader读取用户上传的图片文件并显示预览：

<template>
  <div>
    <input type="file" @change="previewImage" accept="image/*">
    <img v-if="imageUrl" :src="imageUrl" width="200">
  </div>
</template>

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

使用第三方组件库

vue 实现图片预览

Element UI或Ant Design Vue等UI库提供了现成的图片预览组件：

<template>
  <el-upload
    action="#"
    list-type="picture-card"
    :on-preview="handlePreview">
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
</template>

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

使用viewer.js插件

vue 实现图片预览

viewer.js是一个强大的图片查看器，可以集成到Vue项目中：

<template>
  <div>
    <img v-for="src in images" :src="src" :key="src" width="100">
  </div>
</template>

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

export default {
  data() {
    return {
      images: [
        'image1.jpg',
        'image2.jpg'
      ]
    }
  },
  mounted() {
    new Viewer(this.$el)
  }
}
</script>

实现图片放大镜效果

通过CSS和事件处理实现简单的放大镜效果：

<template>
  <div class="magnifier-container">
    <img 
      :src="imageUrl" 
      @mousemove="moveMagnifier" 
      @mouseleave="hideMagnifier"
      ref="mainImage">
    <div class="magnifier" v-show="showMagnifier"></div>
  </div>
</template>

<style>
.magnifier-container {
  position: relative;
}
.magnifier {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-repeat: no-repeat;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
</style>