头像不更新…数据更新之后,图片并没有更新, el-avatar图片更新会有img标签,而图片上传成功后并没有img标签 于是百度查了一下 el-avatar绑定key,值为图片地址 <el-avatar class="marr5 comment-photo" :size="30" :src="common.imgPath + userInfo.picture" :key="common.imgPath + userInfo.picture" > <!
我分析了一下原因,就是头像和名称是一个整体,div的宽度和其他导航按钮一样,我设置成了一个固定值,导致没有空间显示img,所以被隐藏了。 页面设计 所以我这里索性就使用Element Plus的头像组件el-avatar来实现。其次就是点击头像会有一个弹出框,这里使用el-popover弹出框组件实现。 代码语言:html 复制 <template><e...
headImage:heada_Image,//---需要import,这里直接写路径不行 } } 2、在 el-avatar使用 网页图片可以直接获取,不需要使用绑定功能 3、网页图片展示:---网络图片可以直接展示 https://blog.csdn.net/weixin_38826167/article/details/124950451
<el-avatar v-if="circleUrl":size="avatarSize.size":src="circleUrl"alt="用户头像":key="circleUrl"></el-avatar> 最后希望element-ui也能及时更新一下这个相关的bug,或者在文档方面做一下相关说明。
<el-avatar:src="userForm.userHead"></el-avatar> 由于头像上传需要时间,起初以为是异步DOM更新的问题,于是用了this.$nexTick来重新设置头像链接更新头像 this.$nextTick(()=>{this.userForm.userHead=url;}) 解决了上传头像不能实时更新的问题...,但是问题又来了,由于这是用户表单,在做数据回填的时候,假如...
('el-avatar--icon');}if(shape){classList.push(`el-avatar--${shape}`);}// classList.join(" ") 就是将名的数组以空格为连接符拼接到一起returnclassList.join(' ');}},methods:{handleError(){const{error}=this;consterrorFlag=error?error():undefined;// 图片类头像加载失败的回调, 返回 ...
在项目开发中,使用<el-image> 组件实现显示头像,更新头像之后,使用的vuex的携带的userInfo已经更新了,但是头像视图没有触发更新,排查发现,原来后端设计的是该用户的头像默认命名一致,也就是说头像的url没有改变,只是你再去请求一次的话,就可以获取最新头像,基于此,只要想到每次更新后,头像url改变就可以触发视图更新了...
el-avatar 是Element UI(一个基于 Vue 2.0 的桌面端组件库)中的头像组件。它提供了一种简单且美观的方式来展示用户的头像。 2. 阐述el-avatar头像组件的主要功能和用途 el-avatar 的主要功能是显示用户头像,支持多种图片格式和文本头像。它的用途非常广泛,可以用于用户信息展示、评论系统、论坛等多个场景,帮助...
{$id:'avatar',component:UploadToAli,// UploadToAli 为非 ElementUI 组件,从外部引入label:'头像'} ⬆ Back to Top Methods 支持el-form上的所有方法。 其他方法: 方法名描述参数 getFormValue获取当前表单的值- updateValue手动更新表单的值({ id: id, value: value }) ...