荆州做网站公司北京市建设工程招投标

1. 配合table在一起使用，支持预览

此处使用场景是表格中只显示一张图片
preview-src-list只支持数组，故需要将单个字符串转换为转换为字符串数组

      <el-table-column  align="center"  label="二维码"><template slot-scope="scope"><el-imagestyle="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;}