安装
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;
}
效果
实现效果如下,小图横向显示,点击放大该图片。