vue使用vue-photo-preview全屏查看图片

最新推荐文章于 2025-05-29 10:48:25 发布

前端61

最新推荐文章于 2025-05-29 10:48:25 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue使用vue-photo-preview全屏查看图片 vue-photo-preview 全屏查看图片全屏查看图片插件放大图片查看

本文链接：https://blog.csdn.net/qq_43327305/article/details/103436185

vue 专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何使用npm安装Vue图片预览插件并将其引入项目中。通过在main.js中引入插件并使用Vue.use()进行全局注册，可以在img标签中通过preview属性轻松实现图片预览功能。文章还提供了在不同场景下使用preview属性的示例代码。

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

安装插件：

npm install vue-photo-preview --save

引入到项目中：

全局引入：
在main.js中引入：

// 图片预览插件 vue-photo-preview
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)

使用：


  可直接在img标签内添加preview属性，如果页面内有多个swiper,需要分情况，

  如果所有图片可以一次性预览完毕，preview的属性可以是同一个，如果分几次预览，

  则需要定义不同的preview值


// 点击其中一张图片可以向轮播图一样上一张下一张查看其它所有图片
<div class="imgBox">
  <img
    v-for="(item,index) in content.attachmentList"
    :key="index"
    :src="item.fileKey"
    preview="1"
  />
</div>

// 点击其中一张图片只能全屏查看当前这一张图片。没有上一张下一张的按钮
<div class="imgBox">
  <img
    v-for="(item,index) in content.attachmentList"
    :key="index"
    :src="item.fileKey"
    :preview="index"
  />
</div>

前端进阶精选：点此去