第一種：viewerjs使用介紹

1、先安裝依賴
npm install v-viewer --save
2、main.js內引用并注冊調用
//main.js
import Viewer from ‘v-viewer’
import ‘viewerjs/dist/viewer.css’

Vue.use(Viewer);
Viewer.setDefaults({
Options: { “inline”: true, “button”: true, “navbar”: true, “title”: true, “toolbar”: true, “tooltip”: true, “movable”: true, “zoomable”: true, “rotatable”: true, “scalable”: true, “transition”: true, “fullscreen”: true, “keyboard”: true, “url”: “data-source” }
});

<template><div class="content"><h1>Viewer圖片預覽插件</h1><viewer :images="imgs"><img v-for="src in imgs" :src="src.url" :key="src.title"></viewer></div>
</template>
<script>
export default {data () {return {imgs: [{url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg',title: '圖片1'},{url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg',title: '圖片2'}]}},
}
</script>

第二種：vue-photo-preview使用介紹

1、先安裝依賴
npm install vue-photo-preview --save

2、main.js內引用并注冊調用

//main.js
import preview from ‘vue-photo-preview’
import ‘vue-photo-preview/dist/skin.css’
Vue.use(preview)
3、代碼中使用xxx.vue

<template><div class="content"><section><h1>preview圖片預覽插件</h1><img v-for="src in imgs" :src="src.url" :key="src.title" :preview="src.preview" :preview-text="src.title"></section></div>
</template>
<script>
export default {data () {return {imgs: [{url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg',title: '圖片1',preview: '1'},{url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg',title: '圖片2',preview: '1'}]}},
}
</script>

第三種：vue-picture-preview使用介紹

1、先安裝依賴
npm install vue-picture-preview --save

2、main.js內引用并注冊調用

//main.js
iimport vuePicturePreview from ‘vue-picture-preview’
Vue.use(vuePicturePreview)

3、在根組件添加 lg-preview 組件的位置

<!-- APP.vue -->
<div id="app"><router-view></router-view><lg-preview></lg-preview>
</div>
4、代碼中使用xxx.vue<template><div class="content"><h1>vuePicturePreview圖片預覽插件</h1><img v-for="(img,index) in imgs"v-preview="img.url":src="img.url":alt="img.title":key="index"preview-title-enable="true"preview-nav-enable="true"></div>
</template>
<script>
export default {data () {return {imgs: [{url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg',title: '圖片1'},{url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg',title: '圖片2'}]}},
}
</script>