html图片管理核心是路径可控、加载可靠、维护可溯；开发阶段应使用相对路径，配合srcset/sizes实现响应式，设置width/height防布局偏移，并规范命名与目录分层。
HTML 图片管理的核心不是“怎么插图”，而是“路径可控、加载可靠、维护可溯”——多数人卡在路径混乱和预览失效上，而不是语法不会写。
img 标签的 src 路径必须用相对路径还是绝对路径？
取决于部署方式，但开发阶段强烈建议用相对路径。绝对路径（如 /assets/logo.png）依赖服务器根目录配置，本地双击 HTML 文件会直接 404；而相对路径（如 ./assets/logo.png 或 assets/logo.png）能保证文件夹整体移动后仍可预览。
- VSCode 预览时，
./开头和不加./效果一致，但显式写./更易读、避免歧义 - 不要用
file:///开头的绝对路径——它只在你本机有效，发给同事或部署后必然失效 - 如果项目走构建工具（Vite/Webpack），路径解析规则由配置决定，此时应统一用
src别名（如@/assets/icon.svg），而非硬编码路径
图片加载失败时 alt 文本和 onerror 怎么配合用？
alt 是语义必需项，用于无障碍访问和 SEO，但它不解决“加载失败后显示占位图”的问题；真正兜底要用 onerror。
-
alt应描述图像内容（如alt="用户头像：张三，2025年技术大会演讲现场"），不是“图片加载失败”这类提示 -
onerror可内联写简单降级逻辑，例如：<img src="avatar.jpg" alt="头像" onerror="this.src='fallback-avatar.png'"> - 注意：触发
onerror后若 fallback 图也挂了，会无限循环，需加 guard，比如：onerror="if (!this.src.includes('fallback')) this.src='fallback-avatar.png'"
如何让大图不阻塞页面渲染？
关键不是“压缩图片”，而是控制浏览器何时加载——用 loading="lazy" + 合理的 width/height 声明。
-
loading="lazy"对非首屏图片生效（Chrome 76+ 支持），但不要滥用在首屏 banner 上，否则可能白屏一闪 - 务必设置
width和height属性（不是 CSS），否则浏览器无法预留空间，导致布局偏移（CLS 指标恶化） - 对响应式图片，优先用
srcset+sizes，而不是 JS 动态换src——前者由浏览器原生优化，后者易引发重绘
Markdown 里插入的图片怎么和 HTML 保持一致管理？
VSCode 中 Markdown 的  本质就是生成 <img>，所以路径规则完全复用。但容易忽略两点：
- Markdown 预览器（如 VSCode 内置）默认按当前文件为基准解析相对路径，
docs/guide.md里的实际找的是docs/assets/diag.png，不是项目根目录下的 - Git 提交时，图片二进制文件不会 diff，建议在 README 里加一句说明：“所有
assets/下图片均按文档结构存放，勿手动拖拽修改路径” - 如果用插件自动保存截图（如 Markdown Image Helper），确认它保存路径是否与你约定的
docs/assets/一致——很多插件默认存到./images/，需要手动改配置
最常被跳过的其实是图片命名和目录分层：用 user-flow-v2.png 比 Screenshot_2025-09-28_14-22-33.png 多出三倍可维护性；而把所有图塞进一个 assets/ 文件夹，半年后谁也想不起 icon-17@2x.png 到底是登录按钮还是注销按钮的图标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
