1. 配合table在一起使用,支持预览
此处使用场景是表格中只显示一张图片
preview-src-list只支持数组,故需要将单个字符串转换为转换为字符串数组
<el-table-column align="center" label="二维码">
<template slot-scope="scope">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.qrSrc"
:preview-src-list="toArray(scope.row.qrSrc)"
>
</el-image>
</template>
</el-table-column>
//图片预览转换将单个图片地址转换为图片数组
toArray(a) {
let t = []
t.push(a)
return t;
},
2. 配合form表单显示单张图片
此处是配合el-dialog在一起作为回显使用的
<el-form-item label="检查人签字:">
<el-image
style="width: 200px;
height: 100px"
:src="checkedSignSrc" >
</el-image>
</el-form-item>
.img_contain{
display: flex;
/*border: 1px solid red;*/
flex-wrap: wrap;
}
3. 配合form表单显示多张图片且支持预览功能
<el-form-item label="现场图片:" >
<div class="img_contain">
<el-image v-for="item in urls"
style="width: 100px;
height: 100px;
margin-left: 5px;
margin-top: 5px"
:src="item"
:preview-src-list="urls"
fit="fill">
</el-image>
</div>
</el-form-item>
css代码
.img_contain{
display: flex;
flex-wrap: wrap;
}