el-table中显示图片

el-table中显示图片

将接口返回的图片地址 ，在table中显示出来.
用到了 el-table 表格，和el-image 图片

1.html部分

通过地址拼接，显示正确网址， :src=“``” es6写法。

相关代码：

 <el-table-column
          label="图片"
          prop="ImageUrl"
          align="center"
          width="100px"
        >
          <template slot-scope="scope">
            <el-image
              @click="
                bigImg(`https://xxx.com${scope.row.ImageUrl}`)
              "
              style="width: 50px; height: 50px; margin-bottom:-4px"
              :src="`https://xxx.com${scope.row.ImageUrl}`"
              :preview-src-list="srcList"
            >
            </el-image>
          </template>
        </el-table-column>复制

2.通过点击事件，放大图片

插件自带的一个，点击打开 srcList  图片列表。
所以，添加了 一个点击事件 bigImg ，点击以后将 srcList  图片列表改成现在点击的图片。复制

data中定义 srcList

 srcList:["https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg"]复制

点击事件，当srcList 直接设置成空时候，点击第一个时候就不会弹出框（以后正常）。所以，srcList 保留了一个默认值。

methods: {
    //大图
    bigImg(url) {
      this.srcList[0] = url;
    },
  }复制

这个弹框的相关样式，直接写在 style标签了。写在其他标签，比如说父元素box下，不会生效。

<style lang="less">
.box{}
//大图显示样式
   // .el-image-viewer__mask {
  //   background: none !important;
  // }
  .el-image-viewer__close {
    top: 40px;
    right: 40px;
    width: 40px;
    height: 40px;
    font-size: 24px;
    color: #fff;
    background-color:rgba(255, 255, 255, 0)!important;
}
</style>复制