当前位置：首页 > news >正文

vue 图片回显标签

news 2025/7/31 16:26:59

第一种

 <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-imagev-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-buttonsize="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(",");},

在这里插入图片描述