当前位置：首页 > VUE

vue实现图片预览

2026-01-08 06:42:22VUE

Vue 实现图片预览的方法

使用 Element UI 的 el-image 组件

Element UI 提供了 el-image 组件，支持图片预览功能。通过设置 preview-src-list 属性可以开启预览模式。

<template>
  <el-image 
    :src="imageUrl" 
    :preview-src-list="[imageUrl]"
    fit="cover">
  </el-image>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    }
  }
}
</script>

自定义图片预览组件

创建一个自定义组件，通过点击图片时显示模态框实现预览功能。

<template>
  <div>
    <img :src="imageUrl" @click="showPreview = true">
    <div v-if="showPreview" class="preview-modal" @click="showPreview = false">
      <img :src="imageUrl" class="preview-image">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
      showPreview: false
    }
  }
}
</script>

<style>
.preview-modal {
  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: 999;
}
.preview-image {
  max-width: 90%;
  max-height: 90%;
}
</style>

使用第三方库 vue-photo-preview

vue-photo-preview 是一个专门用于图片预览的 Vue 插件，支持多图预览和手势操作。

安装：

npm install vue-photo-preview

使用：

import Vue from 'vue'
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'

Vue.use(preview)

<template>
  <div class="preview-image">
    <img v-for="(item, index) in images" 
         :key="index" 
         :src="item" 
         preview="1" 
         preview-text="图片描述">
  </div>
</template>

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

使用 Viewer.js 集成

Viewer.js 是一个功能强大的图片查看库，可以集成到 Vue 中使用。

安装：

npm install viewerjs

使用：

<template>
  <div>
    <div class="images" ref="viewer">
      <img v-for="(item, index) in images" :key="index" :src="item">
    </div>
  </div>
</template>

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

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