在el-table显示图片:el-image使用preview-src-list预览显示图片

2,731 阅读1分钟

先上效果图

image.png

大图预览效果,包含放大、缩小、大图预览、旋转、关闭的效果

image.png

el-table表格的架构

// 多张图片的路径是数组;
picturePath:[
"/fyzxhm/file/713a30c9702c432095ba0b22c09cf16c.jpg",
"/fyzxhm/file/078f19f8052e4883bcb82ea327236d79.png",
"/fyzxhm/file/3806676db5f141b4b9ac47a0576a33f0.jpg"]
// el-table
<el-table-column prop="enclosure" label="附件" width="150" sortable>
  <template slot-scope="scope">
    <el-image v-for="(item,index) in picturePath" :key="index"
              style="width: 40px; height: 40px;padding-right:10px"
              :src = "item"
              :preview-src-list="getPreviewImgList(index)"
    >
    </el-image>
    <video src="this.videoPath">视频</video>
  </template>
</el-table-column>
js部分:// 图片预览
getPreviewImgList(index) {
  let arr = [];
  for (let i = 0; i < this.picturePath.length; i++) {
    arr.push(this.picturePath[i + index]);
    if (i + index >= this.picturePath.length - 1) { // 为了取后边小值(采用绝对值)
      index = 0 - (i + 1);
    }
  }
  return arr;
},

注意点:一定要注意图片路径,路径没问题一定可以显示出来!