第一种
<el-form-item label="打款银行回单">
<image-preview :src="form.bankreceiptUrl" :width="120" :height="120"/>
</el-form-item>
// 值为 https://t11.baidu.com/it/app=106&f=JPEG&fm=30&fmt=auto&u=1357965752%2C210811116?w=312&h=208&s=DB90208A8C5304CC5672D0800300F089
第二种 富文本的形式展示
<el-form-item label="服务费打款银行回单">
<div v-html="form.bankreceipt"></div>
</el-form-item>
第三种 带有上传的展示
<el-form-item label="营业执照" prop="attachmentFlowPath" label-width="180px">
<ImageUpload
:value="form.originalUrl"
:fileType="fileType"
:fileSize="0"
@success="successInput"
></ImageUpload>
</el-form-item>
第四种 遍历展示
<el-form-item label="营业执照" prop="attachmentFlowPath" label-width="180px">
<el-image
v-for="item in form.imgList" :key="item"
style="width: 100px; height: 100px"
:src="item"
:preview-src-list="form.imgList"
>
</el-image>
</el-form-item>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-s-check"
@click="drawerOpen(scope.row)"
>查看详情</el-button>
</template>
drawerOpen(row){
this.drawer = true;
this.form = row;
<!-- 字符串分割 -->
this.form.imgList = row.originalUrl.split(",");
},