c08-头像组件 Avatar | 用户身份的视觉锚点

2026-06-27 编译员：编译员 avatar css web-components frontend

Web Component Dictionary v2.0 · 网页组件活字典
83个组件/8大分类/中英双语/实时预览/单文件无依赖
在线体验 | 购买 ¥9.99

头像——用户在数字世界的”脸”。看似最简单的组件，却藏着最多的边界情况。

组件是什么

Avatar（头像组件）是用户标识的视觉表示，通常是圆形或圆角方形，显示用户照片、姓名首字母或默认图标。群聊列表、评论区、导航栏——头像无处不在。

核心挑战：图片加载失败

img.onerror = function() {
  this.style.display = 'none';
  this.nextElementSibling.style.display = 'flex'; // 显示首字母fallback
}

HTML + CSS 完整实现

<div class="avatar-group">
  <!-- 图片头像 -->
  <div class="avatar avatar-md">
    <img src="user.jpg" alt="张三" onerror="avatarFallback(this)">
    <span class="avatar-fallback" style="display:none">张</span>
  </div>
  
  <!-- 仅文字头像 -->
  <div class="avatar avatar-md" style="background:#7c3aed">
    <span class="avatar-fallback">李</span>
  </div>
  
  <!-- 头像组（堆叠） -->
  <div class="avatar-stack">
    <div class="avatar avatar-sm"><img src="a.jpg"></div>
    <div class="avatar avatar-sm"><img src="b.jpg"></div>
    <div class="avatar avatar-sm avatar-more">+5</div>
  </div>
</div>

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  overflow: hidden;
  background: #dbeafe;
  color: #1e40af;
  font-weight: 600;
  flex-shrink: 0;
}

.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-md { width: 40px; height: 40px; font-size: 14px; }
.avatar-lg { width: 56px; height: 56px; font-size: 20px; }
.avatar-xl { width: 80px; height: 80px; font-size: 28px; }

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 在线状态指示 */
.avatar-wrap { position: relative; display: inline-block; }
.avatar-badge {
  position: absolute;
  bottom: 2px; right: 2px;
  width: 10px; height: 10px;
  border-radius: 9999px;
  border: 2px solid white;
  background: #10b981;
}

/* 堆叠头像组 */
.avatar-stack { display: flex; }
.avatar-stack .avatar {
  border: 2px solid white;
  margin-left: -8px;
}
.avatar-stack .avatar:first-child { margin-left: 0; }

关键技术点

动态颜色生成：根据用户名生成一致的背景色，不随机，同一用户永远同一颜色：

function nameToColor(name) {
  const colors = ['#ef4444','#f97316','#eab308','#22c55e','#3b82f6','#8b5cf6','#ec4899'];
  let hash = 0;
  for (let c of name) hash = (hash << 5) - hash + c.charCodeAt(0);
  return colors[Math.abs(hash) % colors.length];
}

常见坑点

object-fit: cover 不加，图片会变形拉伸
首字母取汉字时用 name[0] 不是 name.charAt(0)（两者等价但后者更清晰）
堆叠头像 z-index 顺序：第一个在最上层（z-index 从高到低）

完整可复制代码

<script>
function avatarFallback(img) {
  var fb = img.nextElementSibling;
  img.style.display = 'none';
  if(fb) fb.style.display = 'flex';
}
</script>

本文组件收录于 Web Component Dictionary v2.0，83个实用组件，¥9.99即可获取全套。

Avatar Component - The Visual Anchor of User Identity

Web Component Dictionary v2.0
83 components / 8 categories / bilingual / live preview / zero dependencies
Live Demo | Buy $1.38

The avatar seems simple but hides many edge cases — missing images, long names, group stacking.

Core Challenge: Image Load Failure

Always provide a fallback: show initials when image fails to load. Use img.onerror to toggle between the <img> and a fallback <span>.

Dynamic Color Assignment

Generate consistent colors from username using a hash function — same user always gets the same color:

function nameToColor(name) {
  const colors = ['#ef4444','#f97316','#22c55e','#3b82f6','#8b5cf6'];
  let hash = name.split('').reduce((h,c) => (h<<5)-h+c.charCodeAt(0), 0);
  return colors[Math.abs(hash) % colors.length];
}

Part of Web Component Dictionary v2.0 — 83 components, zero dependencies.