1. 配合table在一起使用，支持預(yù)覽

此處使用場(chǎng)景是表格中只顯示一張圖片
preview-src-list只支持?jǐn)?shù)組，故需要將單個(gè)字符串轉(zhuǎn)換為轉(zhuǎn)換為字符串?dāng)?shù)組

      <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>//圖片預(yù)覽轉(zhuǎn)換將單個(gè)圖片地址轉(zhuǎn)換為圖片數(shù)組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表單顯示多張圖片且支持預(yù)覽功能

          <el-form-item  label="現(xiàn)場(chǎng)圖片：" ><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;}