Java-Vue在线预览图片

Java-Vue在线预览图片

第一步：table中添加列

<el-table-column label="照片" align="center" prop="image_url">
<template slot-scope="scope">
    <el-image style="width: 50px; height: 50px" :src="scope.row.image_url" fit="fill" :preview-src-list="srcList" @click="getSrcList(scope.row)"/>
</template>
</el-table-column>

第二步：给预览数组赋值

getSrcList(row) {
    this.srcList = [];
    if(row.imageUrls !== undefined && row.imageUrls !== null && row.imageUrls.length > 0){
    row.imageUrls.forEach(item => {
        this.srcList.push(item);
    });
    }else{
    this.srcList.push(row.image_url);
    }
},