VUE的图片预览插件 vue-photo-preview

1.安装：

npm install vue-photo-preview --save

2.在main.js 入口文件中配置：

import preview from 'vue-photo-preview'
Vue.use(preview)

3.页面渲染：

• 情况一： 页面本身就存在img标签，且是独立的一个

：src 对应后台返回的图片路径
preview值相同即表示为同一组
:preview-text    描述文字
<img  :src="s.answer_pic" draggable="false" preview="1" :preview-text="s.student_name+'-'+s.totalscore+'分'">

• 情况二：页面展示多个img标签，且循环渲染出来的（为了能够继续相应改插件的查看图片的方法，这里采用在外层套一个div包住元素，并将img渲染的图片地址同时作为父级div的背景图）

<div class="img-box" v-for="(url, index) in context.image" :style="{'background-image': 'url(' + url + ')'}" :key="index">
       <img preview="repairDetail" preview-text="" :src="url" alt="">
</div>


css样式：
.img-box{
    float: left;
    width: 30%;
    padding: 15%;
    margin: 1.65%;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.img-box img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
}

文档地址：
http://npm.taobao.org/package/vue-photo-preview