Element-ui官方

实现效果

代码实现

html

 <el-table-column label="头像" width="120"><div class="demo-fit"><div class="block"><el-avatarshape="square":size="50":fit="fit":src="headerurl"></el-avatar></div></div></el-table-column>

data中定义

fit: "cover", // 头像类型
headerurl: "", // 头像地址

  methods: {// 列表evaluateList() {this.loading = true;evaluatePost(this.evPost).then((res) => {console.log("私教列表", res);this.loading = false;if (res.data.code == "666") {this.table = res.data.list;this.total = res.data.count;// 图片赋值(根据接口返回  对应赋值)this.headerurl = res.data.list[0].headerurl}});},

更多初级细节可关注查看文章

运用el-avatar显示图片/头像相关推荐

Vue显示图片的几种方式
前言最近在做自己的项目,有这么一个需求,用户列表需要展示用户的头像,之前一直没有处理,趁着这次机会,正好分享下我的解决过程. 头像这一栏空荡荡的,我这种强迫症患者难受死! 首先声明下,我的数据列表是 ...
基于cropper和sweetalert的简单图片/头像裁剪上传
基本功能前端基本样式: 进行图片裁剪及上传: 点击上传后,js会将截取到的数据转为图片数据利用ajax发送给后台进行存储.存储成功后,刷新前端页面,头像改变. 上传成功后:自动刷新网页,更改头像基 ...
若依前端table中如何显示图片？
图片预览 $.table.imageView {field: 'avatar',title: '用户头像',formatter: function(value, row, index) {return ...
若依图片上传到服务器，前端显示图片
效果图如下: 前端代码: //-----------table显示图片<el-table-column label="图片地址" align="center&quo ...
18、ListView显示图片
[size=medium] ListView显示图片(只有文字显得很傻),很多了,效果图就不找了,这里主要是网络图片,利用上节网络图片获取的类. 先定义了一个类,ModelList,主要是存放List ...
前端头像上传功能实现之普通图片/头像上传详细解析1【扩展知识FormData对象】
上传的图片/头像有两种方案上传第一种我们不对图片做处理直接上传到服务器端,把图片上传到服务器的img文件夹当中,然后我们把图片的地址信息存储在数据库当中,用图片的时候我们直接调用地址第二种方案是我 ...
Axure教程：中继器如何加载显示图片
编辑导语:在原型设计中,很多场景会应用到"中继器"这个元件.那么中继器如何加载显示图片的操作?很多新手都会无从下手.本文作者详细讲解了中继器加载显示图片的方法,供你学习. 一.元件 ...
麒麟子Cocos Creator实用技巧一：如何正确地显示微信头像
不管是游戏App,还是H5,又或者是微信小游戏.但凡接入了微信登录的应用,都可能需要显示微信头像. 在Cocos Creator中,我们常见的显示方法像下面这样 var headimg = 'http ...
python代码图片头像_Python玩微信——头像组字篇
正好今天有位老哥过生日,结合着微信头像和点阵字,搞了个头像拼字的代码,朋友圈九宫格效果如下: 其中,每个字都是16*16的点阵,点阵中每个点可以拆解为4个好友头像图片: 代码中汉字文本可以自定义输入, ...

运用el-avatar显示图片/头像

实现效果

代码实现

运用el-avatar显示图片/头像相关推荐

最新文章

热门文章

运用el-avatar显示图片/头像

实现 效果

代码实现

运用el-avatar显示图片/头像相关推荐

最新文章

热门文章

实现效果