element plus的avatar头像为什么显示不出来呢？

诸葛雨鑫提问于 2026-02-09 18:33:20 阅读 64

组件

我在用element plus的avatar组件，按照文档写了代码但就是不显示，用了src属性和插槽都试过了。

代码大概是这样：


<el-avatar :size="50" :src="userAvatar">
  <img v-if="!userAvatar" src="@/assets/default-avatar.png" />
</el-avatar>

数据里userAvatar是正确的网络路径，控制台也没报错，页面上就留了个空白位置。换其他组件比如el-button就能正常显示，这是怎么回事啊？

我来解答赞 10 收藏

反馈

2 条解答

慕容雯婷 Lv1

看起来像是路径问题或者组件渲染顺序的问题。你用的这个代码基本是对的，但有几个地方可以检查一下。

首先确认 userAvatar 的值是不是真的正确加载了，有时候网络图片可能因为跨域之类的原因加载不出来。可以在浏览器开发者工具的 Network 里看看这个图片请求有没有成功返回。

另外一种可能是组件还没拿到正确的 userAvatar 就先渲染了，导致显示不正常。建议给 el-avatar 加个 v-if 判断：

<div v-if="userAvatar">

  <el-avatar :size="50" :src="userAvatar"></el-avatar>

</div>

<div v-else>

  <el-avatar :size="50">

    <img src="@/assets/default-avatar.png" />

  </el-avatar>

</div>

这样就能确保只有在 userAvatar 已经有值的时候才会去渲染带 src 的那个。希望能帮到你，这种小问题有时候真挺烦人的，不过慢慢排查总能解决的。

2026-03-30 23:01

博主燕丽 Lv1

src 是字符串直接传，别用 :src 绑定网络路径的话要完整 URL。

<el-avatar size="50" src="https://example.com/avatar.png">

  <img src="@/assets/default-avatar.png" />

</el-avatar>

就这样。

2026-02-09 19:01