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>