UI 组件 · 基础
图片
Image
也叫：图像、配图、缩略图、img
在页面上显示一张图片，通常要处理尺寸比例、加载占位、加载失败和点击放大预览。
点「标注」看每个部分叫什么。
怎么跟 AI 说
改成你的业务内容再发商品卡片顶部放一张封面图：容器固定 4:3 比例，图片用 object-fit: cover 裁切填满，四角 8px 圆角；加载中显示浅灰占位，加载失败显示灰底加图片图标；图片进入视口时再加载，点击后全屏预览，alt 写商品名称。
发给
01判断
你的内容是这样吗？
对照两列，确认图片是不是你要找的。
02避坑
常见坏用法
看起来能用，其实会给用户添麻烦。
- 01
没有固定宽高比，图片加载出来把下面的内容挤下去
- 02
直接写死宽高导致图片被拉伸变形，没有用 object-fit
- 03
加载失败显示浏览器默认的破图标，没有兜底
03识别
怎么认出它
先看整体结构，再对照几个一眼能认出的特征。
结构
一个定好宽高比的容器，内部是图片本身，可附带加载占位、失败兜底图和点击放大的预览层。
组成部分点一下，在上面的线框里标出来
识别特征
- 1一块矩形图片区域，常带圆角
- 2未加载时是浅灰色占位块，可能有图片图标
- 3悬停时可能出现放大镜或「预览」遮罩
04解释
详细解释
图片看起来最简单，做好却要处理好几件事：尺寸比例，容器先定好宽高比（如 16:9、1:1），用 object-fit: cover 让图片裁切填满，而不是被拉伸变形；加载过程，没加载完前显示浅灰占位，屏幕外的图片用懒加载延后下载；加载失败，显示带图标的灰色兜底块，而不是浏览器默认的破图标；替代文字，给 alt 写上图片内容，方便读屏软件和搜索引擎。
组件库里的图片组件（如 Ant Design、Element Plus 的 Image）通常还带点击放大预览、多图左右切换。多张图片一起展示时，要考虑用 画廊、卡片网格 或 轮播图 来组织。用户头像这种小圆图属于 头像 组件。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
component-image- DOM 选择器
插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。
imgpicturefigure:has(img).ant-image.el-image.arco-image.t-image__wrapper.n-image
- 类名关键词
类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。
imageimgphotopicturethumbnailthumbproduct-imagecover-imagebanner-image
- 组件名
React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。
ImageImgPicture
- 优先级
- 1 · 同一层有多条命中时，优先级高的胜出
- 版本
- v2 · 更新于 2026/09/30