只写 src 和 alt 不够，必须设置宽高比、校验协议、监听事件并合理使用懒加载。否则会导致布局跳动、首屏变慢、可访问性失效及 csp 报错。

直接用 <img> 标签插入图片没问题，但只写 src 和 alt 已经不够用了——现代页面会因缺失宽高比、懒加载误用、路径失控或响应式失效，导致布局跳动、首屏变慢、屏幕阅读器失语，甚至触发 CSP 报错。

为什么只写 src 和 alt 会出问题

浏览器拿到一个没尺寸信息的 <img>，初始渲染时盒子高度为 0，等图片下载完再撑开，造成 CLS（累积布局偏移），影响 Core Web Vitals。更隐蔽的是：如果用 CSS 覆盖了 width/height 属性（比如加了 max-width: 100%），浏览器就无法推断原始宽高比，aspect-ratio 失效，CLS 风险照旧。

常见错误现象包括：

• 页面刚打开时文字上蹿下跳
• 首屏 banner 图延迟出现，LCP 指标拉垮
• 手机访问时下载了 2MB 的桌面图，流量白跑
• 图片 404 后留一个透明空框，毫无兜底提示

必须设置宽高比，而不是仅设 width/height 属性

显式写 width="600" height="400" 能防初始跳动，但它是固定像素值，不响应式，且在高 DPR 设备上模糊。正确做法是用 CSS 控制容器比例，让图片自适应填充。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 推荐：用 aspect-ratio: 16 / 9 + width: 100%，例如 <img src="a.jpg" alt="..." style="max-width:90%">
• 兼容旧版 Safari（≤15.3）：改用 position: relative; height: 0; padding-bottom: 56.25%（16:9 对应值）
• 禁用 min-height 或 max-width 单独撑高——它们不参与初始布局计算，无法阻止盒模型塌陷

loading="lazy" 不能乱加，首屏图必须 eager

loading="lazy" 是原生懒加载开关，但它按「进入视口」触发请求。对 banner、主图、登录头像这类关键图像，加了反而拖慢 LCP。

• 关键图：省略 loading 属性（默认 eager），或显式写 loading="eager"
• 非首屏图（如列表页第 3 张起、文章末尾相关图）：才加 loading="lazy"
• Safari 兼容注意：iOS 15.4+ 才完整支持，若需全平台覆盖，得 fallback 到 IntersectionObserver

src 必须校验协议，且 error/load 事件要成对监听

src 不只是路径，是潜在执行入口。用户可控的图片（如评论上传、富文本插入）若未过滤，可能被注入 javascript: 协议或空 src 导致重复请求。

• 动态 src 必须白名单校验：只允许 http:、https:、data:
• 必须监听 load 和 error 事件，且处理逻辑分离：成功时可加 class，失败时必须真实替换 img.src = '/fallback.png'
• 禁止在 load 回调里再次 setAttribute('src', ...) ——会导致二次请求，尤其当原 src 已存在时

真正难的不是“怎么插图”，而是让每张图在任意设备、任意网络、任意辅助工具下都稳、快、可读。宽高比、协议校验、事件兜底这些点，漏掉一个，线上就可能变成不可见的性能黑洞或可访问性断点。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！