摆内容
头像
Avatar
「圆圈里的照片」「用户那个小圆图」「头像图标」「评论旁边的圆图」「右上角我的头像」「个人照片圆框」「默认人形图标」
LIVE DEMO真实可交互，动手试试
- 英文名
- Avatar
- 别名 · 俗称
- 用户头像圆形头像个人形象图shadcn: Avatar
- Web 叫法
- Avatar
- 大白话定义
- 代表用户的小圆图，有照片显示照片，没照片就显示名字首字或默认图。
- 部位拆解
- 图片 Image用户上传的照片，裁成圆形
- 兜底文字 Fallback没图时显示的名字缩写
- 状态点 Status可选，右下角在线小绿点
提示词已按当前平台组织好，复制粘贴给 AI 即可
Web
在评论左侧加头像（Avatar）：直径 40px 圆形，没图时显示昵称首字，右下角加在线绿点
调试 Prompt组件不听话时用——把症状补在末尾一起发给 AI
调试我的头像（Avatar）。逐一排除：图片加载失败没走 onError 兜底，名字首字不显示；object-fit 没设 cover，照片被拉伸变形；没写死宽高，图片加载前占位塌陷导致布局抖动；右下角状态绿点被父容器 overflow hidden 裁掉。症状是：