当前位置：首页 > VUE

vue原生实现图片预览

2026-02-23 10:51:09VUE

实现图片预览功能

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

使用HTML5的File API

通过HTML5的File API可以读取用户上传的图片文件并在页面上预览：

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

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  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或vue-image-lightbox：

安装vue-image-lightbox：

npm install vue-image-lightbox

使用示例：

<template>
  <div>
    <button @click="showLightbox = true">查看图片</button>
    <light-box
      :images="images"
      :show-light-box="showLightbox"
      @close="showLightbox = false">
    </light-box>
  </div>
</template>

<script>
import LightBox from 'vue-image-lightbox'

export default {
  components: {
    LightBox
  },
  data() {
    return {
      showLightbox: false,
      images: [
        { src: 'https://example.com/image1.jpg' },
        { src: 'https://example.com/image2.jpg' }
      ]
    }
  }
}
</script>

实现缩略图预览

对于多张图片的缩略图预览：

vue原生实现图片预览

<template>
  <div>
    <input type="file" multiple @change="previewImages" accept="image/*">
    <div class="thumbnails">
      <div v-for="(image, index) in imageUrls" :key="index" class="thumbnail">
        <img :src="image" @click="showFullImage(index)">
        <button @click="removeImage(index)">×</button>
      </div>
    </div>
    <div v-if="showFull" class="full-image">
      <img :src="imageUrls[currentIndex]">
      <button @click="prevImage">上一张</button>
      <button @click="nextImage">下一张</button>
      <button @click="closeFullImage">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrls: [],
      showFull: false,
      currentIndex: 0
    }
  },
  methods: {
    previewImages(event) {
      const files = event.target.files
      Array.from(files).forEach(file => {
        if (file.type.match('image.*')) {
          const reader = new FileReader()
          reader.onload = (e) => {
            this.imageUrls.push(e.target.result)
          }
          reader.readAsDataURL(file)
        }
      })
    },
    showFullImage(index) {
      this.currentIndex = index
      this.showFull = true
    },
    closeFullImage() {
      this.showFull = false
    },
    prevImage() {
      this.currentIndex = (this.currentIndex - 1 + this.imageUrls.length) % this.imageUrls.length
    },
    nextImage() {
      this.currentIndex = (this.currentIndex + 1) % this.imageUrls.length
    },
    removeImage(index) {
      this.imageUrls.splice(index, 1)
    }
  }
}
</script>

<style>
.thumbnails {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.thumbnail {
  position: relative;
  margin: 5px;
}
.thumbnail img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  cursor: pointer;
}
.thumbnail button {
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  color: white;
  border: none;
  cursor: pointer;
}
.full-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.full-image img {
  max-width: 80%;
  max-height: 80%;
}
</style>