图片加载不出90%是路径错误，相对路径以当前HTML文件位置为基准，绝对路径须从网站根目录（非本地磁盘）起算；务必用本地HTTP服务测试并查看Network面板确认实际请求URL。
图片加载不出，90% 是路径写错了——不是模板有问题，而是你没搞清「相对路径以谁为基准」。绝对路径能绕过大部分混乱，但得从网站根目录算起，不是你电脑的 C:\ 或 /Users/。
为什么 src="images/logo.png" 在子页面里总 404
相对路径是相对于当前 HTML 文件位置计算的。比如 /pages/about.html 里写 src="images/logo.png"，浏览器实际请求的是 /pages/images/logo.png，而不是你放在 /images/ 下的那张图。
- 改用以
/开头的绝对路径：src="/images/logo.png"（从域名根目录开始） - 打开浏览器 DevTools → Network 面板，点开失败的图片请求，看
Request URL真实发去了哪 - 别在本地双击打开 HTML：
file://协议下相对路径行为异常，必须起本地服务（如 VS Code Live Server 或python3 -m http.server 8000）
用了 却只显示空白，不是格式问题就是缺兜底
<picture> 本身不渲染内容，它只是个容器；真正负责显示的是末尾那个 <img> 标签。Safari 13 以下、IE 完全忽略 <source> 的 type 属性，如果没写 <img>，页面就是空的。
-
<picture>必须以一个带src的<img>结尾，这是所有浏览器都认的 fallback - 不要只信
type="image/webp"，可加media="(min-width: 1px)"强制触发<source>解析 - 确保 WebP/AVIF 图片本身已压缩，否则换格式毫无意义——用
sharp或squoosh.app批量转
懒加载 loading="lazy" 没反应，可能是动态插入或 CSS 干扰
loading="lazy" 只对「初始 HTML 中已存在 + 不在首屏视口内」的 <img> 生效。React/Vue 渲染出来的图、被 position: absolute; top: -9999px 占位的图、父容器加了 overflow: hidden 或 transform 的图，都会让这个属性静默失效。
立即学习“前端免费学习笔记（深入）”；
- 首屏关键图（banner、logo）千万别加
loading="lazy"，Chrome 可能跳过加载导致白屏 -
<picture>里的<source>不支持loading属性，只有最外层的<img>认 - 要精细控制加载时机（比如提前 200px），得用
IntersectionObserver手动实现，但回调里只做el.src = el.dataset.src和unobserve，别塞 DOM 操作
最容易被忽略的是：路径错不是“找不到文件”，而是“找错了地方”。每次改完路径，务必打开 Network 面板确认 Request URL 和真实文件位置是否一致——别靠猜，要看浏览器实际发了什么请求。
