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

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

组件

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

代码是这样写的：

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

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

Vue组件主题定制

我来解答赞 1 收藏

反馈

1 条解答

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