el-avatar组件头像切换不更新问题相信在开发中大部分同学都使用 elementtUi 作为搭建项目的首选，今天用到

前言

在【音乐博客】中IT知识模块中的列表显示图片。

在列表中，使用el-avatar组件头像作为展示图片，第一页是有图片的，在点击第二页，重新切换为第一页时，发现第一页的图片不展示。

起初想的是不是接口没有及时返回图片url，经过不断的测试，发现如果页面进来的时候只要头像加载成功了，那么再去修改头像，头像是会自动刷新的。然后就去翻看了dom信息，发现当头像加载失败时，dom是没有头像img标签的，加载成功就存在img标签。

代码如下：

<el-avatar
  shape="square"
  :size="150"
  fit="fill"
  class="image"
  :src="data.photo"
/>

一开始发现这个问题的时候，第一反应就想到接口没有返回url。查看发现有，我就想是不是标签的问题，我同样适用img标签放，发现图片正常显示，那就是el-avater组件的问题了。

加上了一个key属性，没想到就真的可以了，由此可见，key在组件渲染还是有很大用处的。

代码如下：

<el-avatar
  :key="data.photo"
  shape="square"
  :size="150"
  fit="fill"
  class="image"
  :src="data.photo"
/>