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(",");
      },
相关推荐
90后的晨仔12 分钟前
5分钟搭建你的第一个TypeScript项目
前端·typescript
专注前端30年25 分钟前
Vue2 中 v-if 与 v-show 深度对比及实战指南
开发语言·前端·vue
90后的晨仔27 分钟前
TypeScript是什么?为什么前端必须学它?
前端
用户47949283569151 小时前
从 58MB 到 2.6MB:我是如何将 React 官网性能提升 95% 的
前端·javascript
该用户已不存在1 小时前
7个让全栈开发效率起飞的 Bun 工作流
前端·javascript·后端
芙蓉王真的好11 小时前
Angular CDK 响应式工具指南:从基础到自适应布局应用
前端·javascript·angular.js
Boale_H1 小时前
如何获取npm的认证令牌token
前端·npm·node.js
qq_339191141 小时前
vue3 npm run dev局域网可以访问,vue启动设置局域网访问,
前端·vue.js·npm
帅气的花泽类1 小时前
npm error code ERR_SSL_TLSV1_UNRECOGNIZED_NAME
前端·npm·node.js
明仔的阳光午后3 小时前
React 入门 01:快速写一个React的HelloWorld项目
前端·javascript·react.js·前端框架·reactjs·react