VUE v-viewer实现图片点击放大预览

安装

npm install v-viewer --save

注册组件（main.js）

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer);

页面展示

form表单

<viewer :images="img">
  <div class="picture_wrap">
    <div v-for="(item,index) in img" :key="index" class="pic">
      < img :src="'data:image/png;base64,'+item" style="max-width: 160px;height: 120px;">
    </div>
  </div>
</viewer>

CSS

.picture_wrap {
  margin: 0 10px 10px 10px;
  border-radius: 4px;
  display: flex;
}
.pic {
  min-width: 100px;
  min-height: 100px;
  width: 30%;
  margin-right: 1%;
  border: 1px solid #cdcdcd;
  border-radius: 6px;
}

img {
  width: 100%;
  height: auto;
}

效果

实现效果如下，小图横向显示，点击放大该图片。