←→ 切换·Esc 返回

图片Image

内容与数据展示
展示图片，并处理尺寸、裁切和失败状态
也常被叫作图像图片组件

图片组件可以统一处理比例、裁切、懒加载、预览和加载失败。页面要提前保留空间，避免内容跳动；有信息意义的图片需要替代文字，纯装饰图片则让读屏跳过。

🔍 预览
⚠
加载失败
容易混淆？这样区分
图片Image≠图标Icon

图片 Image 展示照片、插画或内容本身；图标 Icon 用简短、重复的小符号表达功能或状态。

图片Image≠视频Video

图片 Image 是一张静态画面；视频 Video 有播放、暂停、时长和声音等随时间变化的内容。

什么时候用

  • 封面、头像、商品图：所有正经展示图片的地方
    封面商品图
  • 需要点击放大看细节，自带预览交互
    缩略图→ 点击放大预览
  • 图片可能加载失败，要有兜底占位
    ⚠ 加载失败挂了也有兜底，不是一片空白
  • 容器比例固定，图片裁切填充不变形
    容器是方的，图是宽的，裁切填充不变形

什么时候不用

  • 写死宽高硬拉伸，图被压扁拉长
    写死宽高硬拉伸，图被压扁
  • 一屏几十张大图不做懒加载，页面卡死
    一屏几十张全加载，页面卡死
  • 把标题文字做进图里，搜不到也读屏读不了
    新品发布会 · 限时 5 折文字做进图里，搜索不到、读屏读不了
  • 忘了写 alt 描述，加载失败一片空白
    ⚠ 加载失败没写 alt，失败时一片空白
组成结构 · Anatomy
🔍 预览
1图片容器Image决定尺寸和裁切方式
2图片本体Img真正展示的内容
3预览遮罩Mask悬停出现，点击放大
常见变体 · Variants
裁剪填充Cover
容器比例固定，宁可裁掉也不变形
完整显示Contain
图的内容不能裁，留边也要看全
圆形头像Circle
头像专用，圆角裁成圆形
加载失败Fallback
⚠
加载失败
图片加载出错时的兜底占位
典型使用场景
商品封面
桌面升降台
¥1,299
户外登山包 40L
¥459
用户头像
林小hu · 2 小时前
这组场景图太直观了，已抄进团队规范 👍
oil-oil · 5 小时前
正愁怎么跟新人解释空状态，转发了
点击放大预览
文章配图（悬停出现预览遮罩）：
🔍 预览
加载失败兜底
🖼️图片加载失败
alt="山间徒步路线实拍" —— 图挂了也有兜底占位和说明文字，不留一片空白。