vue 图片回显标签

第一种

 <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(",");
      },
相关推荐
虾球xz30 分钟前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇35 分钟前
HTML常用表格与标签
前端·html
疯狂的沙粒39 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员1 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐1 小时前
前端图像处理(一)
前端
程序猿阿伟1 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒1 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪1 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背1 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express