图片Image
你可能会说
文章里要能插图，手机上别变形。
在网页或软件里显示头像、商品图、文章配图等图片例如商品列表应先为封面留出固定位置，图片加载后再按比例裁切，避免页面突然跳动。图片本身承载信息时要填写文字说明，方便图片加载失败或使用读屏的人理解；纯装饰图片不需要朗读。
也常被叫作图像图片组件
容易混淆？这样区分
什么时候用
- 封面、头像、商品图等常见图片展示场景封面商品图
- 需要点击放大看细节，自带预览交互缩略图→ 点击放大预览
- 图片可能加载失败，要有兜底占位⚠ 加载失败加载失败时显示占位和说明
- 容器比例固定，图片裁切填充不变形
什么时候不用
- 按指定宽高强制拉伸，导致图片比例失真
- 大量图片同时加载，明显阻塞页面响应
- 把标题文字只做进图里，搜索和读屏无法读取新品发布会 · 限时 5 折
- 缺少 alt 描述，加载失败后无法说明图片内容⚠ 加载失败
组成结构 · Anatomy
🔍 预览
决定尺寸和裁切方式
真正展示的内容
悬停出现，点击放大
常见变体 · Variants
裁剪填充Cover
容器比例固定，宁可裁掉也不变形
完整显示Contain
图的内容不能裁，留边也要看全
圆形头像Circle
头像专用，圆角裁成圆形
加载失败Fallback
⚠
加载失败
加载失败
图片加载出错时的兜底占位
典型使用场景
商品封面
用户头像
林小hu · 2 小时前
这组场景图太直观了，已抄进团队规范 👍
oil-oil · 5 小时前
正愁怎么跟新人解释空状态，转发了
点击放大预览
文章配图（悬停出现预览遮罩）：
加载失败兜底
🖼️图片加载失败
alt="山间徒步路线实拍" —— 加载失败时仍显示占位和说明文字。
延伸阅读 · 权威出处