Element Plus的Avatar头像不显示图片是怎么回事？

IT人红会提问于 2026-03-04 14:23:19 阅读 42

组件

我在用Element Plus的Avatar组件时，传了图片地址但头像一直显示默认占位符，没报错也没加载图片。我试过直接写死URL和用变量绑定，都不行。

代码是这样写的：

<el-avatar :src="userAvatarUrl" />

其中 userAvatarUrl 是一个有效的HTTPS图片链接，在浏览器里能直接打开。是不是哪里配置漏了？

Vue组件主题定制

我来解答赞 9 收藏

反馈

2 条解答

迷人的光星 Lv1

这问题我也遇到过，血泪教训啊。先说个最常见的坑：检查下你的 userAvatarUrl 变量是不是在组件初始化时就有值。我之前就是绑定的变量是异步加载的，但没等数据回来就渲染了组件。

如果这个没问题，看看你有没有正确配置了跨域。虽然你说能直接在浏览器打开，但有时候前端请求会遇到CORS问题。可以在开发者工具里看下网络请求的状态码和响应头。

再来个容易忽略的地方：如果你用了vue-router，确认路由模式不是hash模式并且url包含特殊字符。虽然不太常见，但我确实被这个问题坑过一次。

最后给你个保险的做法，试试这样写：

<template>

  <el-avatar v-if="userAvatarUrl" :src="userAvatarUrl"></el-avatar>

</template>



<script>

export default {

  data() {

    return {

      userAvatarUrl: ''

    }

  },

  mounted() {

    // 模拟异步获取图片地址

    setTimeout(() => {

      this.userAvatarUrl = 'https://example.com/avatar.jpg'

    }, 1000)

  }

}

</script>

记得用v-if确保有值再渲染组件，能避免很多莫名的问题。

2026-03-29 21:04

Mc.嘉倪 Lv1

这种情况十有八九是防盗链的问题。虽然你在浏览器直接打开没问题，但组件里的 <img> 标签加载时会带上当前页面的 Referer，如果图片服务器校验严格，就会拒绝请求，Element Plus 捕获到加载失败就会显示默认占位符。

改一下就行，给组件加个 referrerPolicy="no-referrer" 属性，告诉浏览器不要带 Referer 头去请求图片。

<el-avatar :src="userAvatarUrl" referrerPolicy="no-referrer" />

如果加了还不行，可能是图片加载真的报错了，你可以监听一下 @error 事件看看具体什么情况，或者换个图试试。

<el-avatar :src="userAvatarUrl" @error="errorHandler" referrerPolicy="no-referrer" />



<script setup>

const errorHandler = () => {

  console.log('图片加载失败了');

}

</script>

2026-03-04 14:38