// 小图片
<el-table-column align="center" label="认证资料">
<template slot-scope="scope">
<img class="img" :src="scope.row.img" @click="showEditDialog(scope.row.img)"/>
</template>
</el-table-column>
// 放大区域的图片,展示图片详情
<el-dialog
title="图片详情"
:visible.sync="editDialogVisible"
width="66%"
>
<img class="img2" :src="img">
</el-dialog>
data(){
return{
editDialogVisible: false,
img:"",
}
},
methods:{
showEditDialog(img) {
console.log(img);
this.img=img;
this.editDialogVisible = true;
},
}
<style lang="less" scoped>
.img {
width: 120px;
height: 80px;
}
.img2{
width: 300px;
}
</style>