1.安裝：

npm install vue-photo-preview --save

2.在main.js 入口檔案中配置：

import vuePicturePreview from 'vue-picture-preview'
Vue.use(vuePicturePreview)

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;
}