img标签是性能、可访问性、安全与布局稳定性的交叉点，需同时关注aspect-ratio防CLS、loading属性优化LCP、src白名单与错误处理、alt语义化等全链路实践。
直接说结论：img 标签不是“写上 src 和 alt 就完事”的静态容器，它在现代前端中是性能、可访问性、安全与布局稳定性的交叉点。漏掉任意一个关键属性或监听机制，都可能引发 CLS 偏移、LCP 延迟、屏幕阅读器失语、甚至 XSS 漏洞。
为什么只设 width 和 height 属性已经不够用了
HTML 属性 width="300" height="200" 确实能防止初始布局跳动，但它被浏览器解析为固定像素值，无法响应式缩放，且在高 DPR 设备上会模糊。更严重的是：一旦你用 CSS 覆盖了这些值（比如 max-width: 100%），浏览器就不再能基于 HTML 属性推断宽高比，CLS 风险重新回归。
- ✅ 推荐做法：用 CSS 的
aspect-ratio+width控制容器比例，例如aspect-ratio: 16/9; width: 100% - ⚠️ Safari 15.3 及更早版本不支持
aspect-ratio，需回退：设置position: relative; height: 0; padding-bottom: 56.25%（对应 16:9） - ❌ 禁用
min-height或max-width替代——它们不参与初始布局计算，无法阻止加载前的盒模型塌陷
loading="lazy" 不是万能开关，首屏图加了反而拖慢 LCP
原生懒加载对非首屏图片非常有效，但它的触发时机是「进入视口时」。如果关键图像（如 banner、主图、登录头像）也加了 loading="lazy"，浏览器会延迟发起请求，直接拉低 LCP（最大内容绘制）指标，导致 Core Web Vitals 评分不合格。
- ✅ 关键图必须用
loading="eager"或干脆省略该属性（默认行为） - ✅ 列表页、长图文页的非首屏图才适合
loading="lazy" - ⚠️ 注意：
loading="lazy"在 Safari 中支持度仍有限（iOS 15.4+ 才完整支持），若需全平台兼容，仍需 Intersection Observer 备选方案
如何真正防住 src 引发的安全和加载失败问题
src 不只是路径字符串，它是潜在的执行入口。用户可控的 src（如富文本、头像上传、评论图片）若未经校验，可能触发 javascript: 协议执行、空 src 重复请求、协议相对路径跨域失败等异常。
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
- ✅ 对动态
src做白名单协议校验：只允许http:、https:、data: - ✅ 必须监听
load和error事件成对处理，不能只靠 CSS opacity 切换——否则加载失败时页面留一个透明空框 - ✅ 错误兜底要真实替换：
img.src = '/fallback.png'，而不是仅加 class 或改文字 - ⚠️ 切记：不要在
load回调里再次setAttribute('src', ...)，会导致二次请求（尤其当src已存在时）
alt 写空字符串 alt="" 是有明确语义的，不是偷懒
很多开发者把 alt="" 当作“懒得写”，其实它代表“此图纯装饰，无信息价值”，是主动告知辅助技术跳过该元素。而缺失 alt 或写成 alt="图片"，则会让屏幕阅读器读出无意义内容，破坏无障碍体验。
- ✅ 功能图标（如警告、删除、编辑）必须写明意图：
alt="删除该条记录"，而非alt="垃圾桶图标" - ✅ 复杂图表需配合
aria-describedby指向隐藏详细描述段落，alt只做摘要 - ⚠️
alt内容会被搜索引擎用于理解上下文，但堆砌关键词（如alt="SEO 优化 图片 免费 下载"）会被判定为垃圾内容，反伤 SEO
最常被忽略的其实是组合效应：比如用了 aspect-ratio 却忘了监听 error，或者加了 loading="lazy" 却没配 fallback 占位背景。单点优化容易，但 img 的健壮性取决于所有环节是否闭环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
