Vue项目添加图片预览功能（不使用swiper）

微微一笑绝绝子

已于 2023-03-15 09:02:15 修改

阅读量655

点赞数 1

分类专栏：前端 Vue 文章标签： vue.js javascript 前端 ecmascript 前端框架

于 2023-03-14 16:08:00 首次发布

本文链接：https://blog.youkuaiyun.com/wwyxjjz/article/details/129543988

版权

本文介绍了在Vue项目中如何不使用swiper，而是利用element UI的组件和el-image-viewer来实现图片预览功能。作者详细讲解了功能1和功能2的实现方法，包括使用element UI自带的预览功能以及el-image-viewer组件，并特别指出在使用过程中需要注意的三个避坑点：数组对象可能导致的错误、on-close事件的正确使用以及如何避免图片预览的异常状态。最后展示了功能实现后的效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用swiper插件实现图片预览总是有这样那样的问题，这次用element自带的组件方便快捷好用！

要实现的功能如下：

功能1 功能2 都是需要大图预览使用的方法不一样

功能1：使用element UI自带的大图预览

项目代码如下：

<div v-if="picNum > 0">
          <el-divider class="lineCss"></el-divider>
          <p class="padding-lr-sm">
            相册 <span style="color: #ff4343">( {
    { picNum }} )</span>
            <img
              class="fr hover-pointer"
              style="margin-top: 3px; width: 16px"
              src="@/assets/img/rightP.png"
              alt=""
              @click="