解决elementUI 中 el-avatar组件头像切换不更新问题

问题描述:
当使用el-avatar组件时,如果刷新页面时,el-avatar图片加载失败了,那么el-avatar组件就会进入到失败的事件中,就像下图一样:
在这里插入图片描述
这时候去修改头像,那么头像修改成功了,但是图片并不会自动加载,而是需要再去刷新一下浏览器,那么这就违背了事情的初衷了。
起初想的是不是因为vuex的getter没有及时更新头像的url信息,就去查了很多相关的资料,最后还是没能解决,经过不断的测试,发现如果页面进来的时候只要头像加载成功了,那么再去修改头像,头像是会自动刷新的。然后就去翻看了dom信息,发现当头像加载失败时,dom是没有头像img标签的,加载成功就存在img标签。如下图:
在这里插入图片描述
在这里插入图片描述
所以就猜想,只要dom存在,那么就能自动刷新头像图片,所以又去element-ui官网看了一下,并没有找到想要解决的思路。

没办法,再去百度了一波elementui el-avatar组件加载图片失败,再修改图片地址,组件不再渲染。
终于发现还是有人和我一样的问题的。

2019-08-23 解决elementUI 中 el-avatar组件头像切换不更新问题
看了一下,他的问题大致和我的差不多,所以就在组件上试了一下,也加上了一个key属性,没想到就真的可以了,由此可见,key在组件渲染还是有很大用处的。

        <el-avatar v-if="circleUrl" :size="avatarSize.size" :src="circleUrl" alt="用户头像" :key="circleUrl" >
           <i class="el-icon-plus avatar-uploader-icon"
               :style="{width:avatarSize.width,height:avatarSize.height,'line-height':avatarSize.lineHeight,'font-size':avatarSize.fontSize}"></i>
        </el-avatar>

最后希望element-ui也能及时更新一下这个相关的bug,或者在文档方面做一下相关说明。

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值