你可能会说
用户没传头像的时候显示什么比较好
名字旁边那个代表某个用户身份的小圆图
看一眼它长什么样
上面这些交互全部由 CSS 完成，没有加载任何脚本 —— 和真实产品里的组件是同一个道理。
大白话解释
头像就是代表某个人或某个账号的那张小圆图，常见的是本人照片，也可能是卡通形象、字母或者随机生成的图案。
它像一个座位牌。名字要读，头像是扫一眼就认出来的，所以在评论、消息、协作列表里，头像往往比名字更先被注意到。
别看它小，要操心的事不少：用户没上传怎么办、上传的图是长条形怎么裁、图裂了显示什么、加载慢的时候占位用什么。这些细节没处理好，页面上就会出现一堆破图白框。
什么时候会遇到
- 看评论区设计稿时，每条评论左边都有一个圆形小图加名字。
- 新注册用户还没传照片，你得决定是显示默认灰头像还是名字首字母。
- 用户上传的是一张竖构图照片，套进圆形里脸被裁掉了一半。
- 头像图片挂在第三方地址上加载失败，页面出现一个个破图小叉。
- 跟 Agent 沟通时你说那条消息左边的圆形小照片，对方要确认指的是头像。
可以直接对 Agent 说
「用户没上传头像时，用名字的第一个字生成一个彩色圆形头像，颜色根据名字固定生成，同一个人每次都要一样。」
「头像统一裁成正方形再显示成圆形，尽量对准人脸中心，别把用户的脸裁一半，圆形外面再留一圈细细的白边。」
「头像图片加载失败时不要显示破图，退回到名字首字母的默认头像，加载过程中先显示一个灰色圆圈占位。」
最容易想岔的地方
常见的错误理解： 头像就是放张照片，没照片就空着或者放个默认小灰人
更准确的理解： 没有照片时应该退化成姓名首字加一块底色。所有人都顶着同一个灰色小人，用户就分不清谁是谁了
常见的错误理解： 头像尺寸可以随便调，反正就是一张图
更准确的理解： 头像常常在列表里几十个一起出现，尺寸一变整行高度就跟着变。它得和文字行高绑定，不能单独把行撑开
测一下：真遇到了你会怎么处理
单选 · 选完立刻看解释
评论区要显示用户头像，但大部分人从来没上传过。
应该怎么处理？
-
默认值让布局在任何数据下都成立。用名字算出来的底色还能让人一眼区分不同用户。
-
布局会塌，读者也看不出那里本该有个头像，整块看起来像没做完。
-
裂图是「出错了」的强信号，会让用户以为网站坏了 —— 而这里其实一切正常。
题目只考「这个场景下的第一反应」，不考名词背诵 —— 头像的定义在上面已经讲过了。