el-table中显示图片

最新推荐文章于 2024-08-02 10:45:13 发布

好多达不溜

最新推荐文章于 2024-08-02 10:45:13 发布

阅读量1.1w

点赞数 8

分类专栏： vue 小demo dd项目文章标签： css3 javascript css

本文链接：https://blog.csdn.net/weixin_46531845/article/details/125201688

版权

vue 小demo 同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

dd项目

3 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中利用Element UI的el-table和el-image组件来显示从接口获取的图片。通过在table列内使用模板插槽，并结合点击事件处理函数实现图片预览。当点击图片时，利用el-image的preview-src-list属性更新图片列表，从而实现大图预览功能。同时，调整了预览图片的样式。

摘要由CSDN通过智能技术生成

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>