图片
Image
UI 组件也叫：图像、配图、缩略图、img
一句话：在页面上显示一张图片，通常要处理尺寸比例、加载占位、加载失败和点击放大预览。
详细解释
图片看起来最简单，做好却要处理好几件事：尺寸比例，容器先定好宽高比（如 16:9、1:1），用 object-fit: cover 让图片裁切填满，而不是被拉伸变形；加载过程，没加载完前显示浅灰占位，屏幕外的图片用懒加载延后下载；加载失败，显示带图标的灰色兜底块，而不是浏览器默认的破图标；替代文字，给 alt 写上图片内容，方便读屏软件和搜索引擎。
组件库里的图片组件（如 Ant Design、Element Plus 的 Image）通常还带点击放大预览、多图左右切换。多张图片一起展示时，要考虑用 画廊、卡片网格 或 轮播图 来组织。用户头像这种小圆图属于 头像 组件。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
商品卡片顶部放一张封面图：容器固定 4:3 比例，图片用 object-fit: cover 裁切填满，四角 8px 圆角；加载中显示浅灰占位，加载失败显示灰底加图片图标；图片进入视口时再加载，点击后全屏预览，alt 写商品名称。
结构与适用场景
结构描述
一个定好宽高比的容器，内部是图片本身，可附带加载占位、失败兜底图和点击放大的预览层。
适用场景
- 商品、文章、作品需要一张封面图或配图
- 图片是内容的核心，用户需要点击放大看细节
- 一组尺寸不一的图片需要统一裁切成相同比例展示
不适用场景
- 用户头像这类小圆图，用头像组件，自带文字兜底
- 纯装饰性的小图形或功能图标，用图标或 CSS 实现更轻
- 需要轮流展示多张同等重要的图，用轮播图或画廊
常见坏用法
- 没有固定宽高比，图片加载出来把下面的内容挤下去
- 直接写死宽高导致图片被拉伸变形，没有用 object-fit
- 加载失败显示浏览器默认的破图标，没有兜底
识别特征
- 一块矩形图片区域，常带圆角
- 未加载时是浅灰色占位块，可能有图片图标
- 悬停时可能出现放大镜或「预览」遮罩
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
imgpicturefigure:has(img).ant-image.el-image.arco-image.t-image__wrapper.n-image