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

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">

参考：

​​关于Vue中图片预览插件（vue-photo-preview）的使用​​