当前位置：首页 > VUE

vue 实现图片预览

2026-03-10 04:17:45VUE

Vue 实现图片预览的方法

在 Vue 中实现图片预览功能，可以通过多种方式实现，包括原生 JavaScript、第三方库或组件。以下是几种常见的方法：

使用原生 JavaScript 和 Vue 结合

创建一个简单的图片预览组件，通过点击图片放大显示。

<template>
  <div>
    <img 
      :src="imageSrc" 
      @click="showPreview = true" 
      style="cursor: pointer; max-width: 200px;"
    >
    <div v-if="showPreview" class="preview-modal" @click="showPreview = false">
      <img :src="imageSrc" class="preview-image">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    imageSrc: String
  },
  data() {
    return {
      showPreview: false
    }
  }
}
</script>

<style>
.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

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

使用第三方库 vue-image-lightbox

vue-image-lightbox 是一个专门为 Vue 设计的图片预览库，支持多图浏览、缩放等功能。

安装：

npm install vue-image-lightbox

使用示例：

<template>
  <div>
    <button @click="showLightbox = true">Open Lightbox</button>
    <light-box
      :images="images"
      :show-light-box="showLightbox"
      @close="showLightbox = false"
    />
  </div>
</template>

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

export default {
  components: {
    LightBox
  },
  data() {
    return {
      showLightbox: false,
      images: [
        { src: 'image1.jpg', caption: 'Caption 1' },
        { src: 'image2.jpg', caption: 'Caption 2' }
      ]
    }
  }
}
</script>

使用 Element UI 的 Image 组件

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

安装：

npm install element-ui

使用示例：

<template>
  <div>
    <el-image 
      :src="imageUrl" 
      :preview-src-list="[imageUrl]"
      style="width: 200px; height: 200px"
    ></el-image>
  </div>
</template>

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

export default {
  components: {
    'el-image': Image
  },
  data() {
    return {
      imageUrl: 'image.jpg'
    }
  }
}
</script>

使用 Viewer.js 插件

Viewer.js 是一个功能强大的图片查看器，可以与 Vue 结合使用。

安装：

npm install v-viewer

使用示例：

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

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

export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg']
    }
  }
}
</script>

实现图片上传并预览功能

结合文件上传实现实时预览：

vue 实现图片预览

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

<script>
export default {
  data() {
    return {
      previewUrl: null
    }
  },
  methods: {
    previewImage(event) {
      const file = event.target.files[0]
      if (!file) return

      this.previewUrl = URL.createObjectURL(file)
    }
  }
}
</script>