vue实现图片预览功能

使用 vue-image-lightbox 实现图片预览

安装 vue-image-lightbox 插件：

npm install vue-image-lightbox --save

在组件中引入并使用：

<template>
  <div>
    <button @click="openLightbox(0)">Open Lightbox</button>
    <light-box 
      :images="images"
      :showLightBox="showLightBox"
      :currentIndex="currentIndex"
      @onClose="showLightBox = false"
    />
  </div>
</template>

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

export default {
  components: {
    LightBox
  },
  data() {
    return {
      images: [
        { src: 'image1.jpg', caption: 'Caption 1' },
        { src: 'image2.jpg', caption: 'Caption 2' }
      ],
      showLightBox: false,
      currentIndex: 0
    }
  },
  methods: {
    openLightbox(index) {
      this.currentIndex = index
      this.showLightBox = true
    }
  }
}
</script>

使用 v-viewer 实现图片预览

安装 v-viewer 插件：

npm install v-viewer

全局注册：

import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer)

组件中使用：

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

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

自定义实现图片预览功能

创建简单的图片预览组件：

<template>
  <div>
    <div class="thumbnail-container">
      <img 
        v-for="(img, index) in images" 
        :key="index" 
        :src="img.thumbnail" 
        @click="openPreview(index)"
      >
    </div>

    <div class="preview-modal" v-if="showPreview">
      <span class="close-btn" @click="closePreview">&times;</span>
      <img :src="currentImage.src" class="preview-image">
      <div class="caption">{{ currentImage.caption }}</div>
      <button @click="prevImage" :disabled="currentIndex === 0">Prev</button>
      <button @click="nextImage" :disabled="currentIndex === images.length - 1">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { src: 'image1-full.jpg', thumbnail: 'image1-thumb.jpg', caption: 'Image 1' },
        { src: 'image2-full.jpg', thumbnail: 'image2-thumb.jpg', caption: 'Image 2' }
      ],
      showPreview: false,
      currentIndex: 0
    }
  },
  computed: {
    currentImage() {
      return this.images[this.currentIndex]
    }
  },
  methods: {
    openPreview(index) {
      this.currentIndex = index
      this.showPreview = true
    },
    closePreview() {
      this.showPreview = false
    },
    prevImage() {
      if (this.currentIndex > 0) {
        this.currentIndex--
      }
    },
    nextImage() {
      if (this.currentIndex < this.images.length - 1) {
        this.currentIndex++
      }
    }
  }
}
</script>

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

.preview-image {
  max-width: 80%;
  max-height: 80%;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

.thumbnail-container img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin: 5px;
  cursor: pointer;
}
</style>

使用 Element UI 的 Image 组件

安装 Element UI：

npm install element-ui

全局引入：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

组件中使用：

<template>
  <div>
    <el-image 
      v-for="(src, index) in images"
      :key="index"
      :src="src"
      :preview-src-list="images"
    >
    </el-image>
  </div>
</template>

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