element ui预览图片

<!-- 图片展示 -->

 // 小图片
     <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>