ElementUI table 显示base64图片

最新推荐文章于 2023-09-20 10:53:13 发布

Shixiaohai0

最新推荐文章于 2023-09-20 10:53:13 发布

阅读量2.9k

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/Litter_sea/article/details/103809245

版权

elementUI table 显示base64图片

正常显示：

<el-table-column prop="headimg" label="发票凭证" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <img :src="scope.row.headimg||'空'" style="width: 50px;height: 30px;" />
                </template>
</el-table-column>

鼠标悬浮可以放大：

<el-table-column prop="img" label="发票凭证" header-align="center" align="center">
                <template slot-scope="scope">
                  <el-popover placement="top-start" title trigger="hover">
                    <img :src="scope.row.img" alt style="width: 150px;height: 150px" />
                    <img slot="reference" :src="scope.row.img" style="width: 30px;height: 30px" />
                  </el-popover>
                </template>
</el-table-column>