[vue] 图片预览插件 vue-photo-preview

最新推荐文章于 2024-04-18 09:37:49 发布

533_

最新推荐文章于 2024-04-18 09:37:49 发布

阅读量119

点赞数

分类专栏： # vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_14993591/article/details/129004117

版权

vue 专栏收录该内容

169 篇文章 3 订阅

订阅专栏

文章介绍了如何在Vue项目中使用vue-photo-preview插件进行图片预览。首先在main.js中导入插件并安装，然后展示了两种使用方式：一种是直接在img标签上使用，另一种是通过preview属性进行分组预览，不同组的图片可以设置不同的描述信息。

摘要由CSDN通过智能技术生成

npm i vue-photo-preview --save

main.js

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

第一种方式：直接使用


<img src="xxx.jpg" preview preview-text="图片描述">

在这里插入图片描述

第二种方式：可以根据preview分组，不同组的照片对应的preview值不同，具体如下所示。

<img src="xxx.png" preview="1" preview-text="描述1-1">
<img src="xxx.png" preview="1" preview-text="描述1-2">
<img src="xxx.png" preview="1" preview-text="描述1-3">
<img src="xxx.png" preview="2" preview-text="描述2-1">
<img src="xxx.png" preview="3" preview-text="描述3-1">