图片加载失败时如何显示默认占位图？

一俊俊提问于 2026-03-19 04:12:20 阅读 34

组件

我在用 Vue 做一个用户头像展示组件，但有些用户的头像 URL 是坏的，页面就直接裂图了。试过在 img 标签上加 @error 事件切换 src，但有时候还是不生效，特别是动态加载的数据。

比如下面这段代码，明明写了错误处理，但偶尔还是会显示空白或者默认的 broken image 图标：

<img 
  :src="user.avatar" 
  @error="handleImageError" 
  alt="avatar"
/>

有没有更可靠的方案？是不是得配合 CSS 或者用 v-if 控制？

我来解答赞 7 收藏

反馈

1 条解答

打工人乙豪 Lv1

最省心的办法是直接用 onerror 属性硬编码默认图，比 Vue 事件更稳：

:src="user.avatar"
onerror="this.src='https://cdn.example.com/default-avatar.png'; this.onerror=null" alt="avatar"
/>

如果还担心，配合 CSS 把浏览器默认的裂图图标 hide 掉：

img {
error-simulation: none;
}
img[src=""] {
visibility: hidden;
}

或者更彻底用 v-if 判断 src 是否有效再渲染，无效直接用占位图。动态数据的话在获取到数据时就处理好 url，别等到渲染阶段再处理。

2026-03-19 05:01