HTML+CSS可统一管理图片资源：固定assets/images目录、用相对路径、data-src存原图、figure包裹、Grid布局+gap排版、onerror处理失败。
直接用 HTML + CSS 就能实现图片资源的统一管理，不需要后端或构建工具——关键不是“存哪”，而是“怎么让路径不散、加载不乱、维护不崩”。
用相对路径 + 固定目录结构避免路径错乱
所有 src 值必须从 HTML 文件所在目录出发写相对路径，且整个项目约定一个根级图片目录（比如统一叫 assets/images/），禁止混用 ./images/、images/、../img/ 这类不一致写法。
- ✅ 正确：
<img src="assets/images/photo-01.jpg" alt="..."> - ❌ 危险：
<img src="images/photo-01.jpg">（如果某页在子目录下，路径立刻失效） - ❌ 更危险：同一项目里有的写
img/，有的写images/，后期批量替换极易漏改 - 开发时可在控制台跑
Array.from(document.images).filter(i => i.naturalWidth === 0)快速揪出所有加载失败的图片，再顺藤摸瓜查路径
缩略图与原图分离，用 data-src 存高清路径
别把 4MB 的原图直接塞进 src——首屏加载慢、流量浪费、移动端卡死。缩略图必须是独立小图（建议 ≤ 30KB，宽 ≤ 400px），原图路径存在 data-src 属性里，只在点击或需要时才加载。
<img src="assets/images/thumbs/photo-01.jpg" alt="..." loading="lazy">-
loading="lazy"让浏览器自动延迟加载非首屏图，比手写 IntersectionObserver 更轻量可靠 - 注意：不要用
srcset替代data-src，前者是给不同 DPR/尺寸设备选图，后者是“缩略图 vs 原图”的语义区分
用 <figure> 包裹每张图，统一语义与样式锚点
不用一堆 <div> 套图，既难读又难维护。<figure> 天然语义清晰，还能和 <figcaption> 配合，为后续加标题、操作按钮、错误降级留出标准结构。
立即学习“前端免费学习笔记（深入）”；
- 每个图单元写成：
<figure class="gallery-item"><img><figcaption>文件名</figcaption></figure> - CSS 中设
.gallery-item { display: inline-block; width: 100%; vertical-align: top; }，比display: contents兼容性更好（尤其 Safari 旧版） - 图片加载失败时，
onerror可统一处理：<img onerror="this.parentElement.classList.add('broken')">，再用 CSS 隐藏图、显示占位提示
响应式网格用 grid-template-columns: repeat(auto-fit, minmax(...))
Flex + flex-wrap 排多图，最后一行常只剩一两张、左右空一大片——尤其当 <figcaption> 高度不一时，断行逻辑完全失控。Grid 是唯一能稳定控制列数+填满整行的方案。
- 核心声明：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; - 必须用
gap控制间距，别用margin模拟，否则网格对齐会崩 - 图片宽高比不一致？加
aspect-ratio: 4/3或包一层<div style="overflow: hidden;">截掉多余部分 - IE10+ 兼容需改用
grid-column-gap和grid-row-gap，但 IE 已淘汰，现在基本可忽略
真正难的不是写几行 Grid 代码，而是坚持让每张图都走同一套路径规则、同一组包裹结构、同一个加载时机——散装管理一天就崩，统一管理才能撑住几百张图的日常迭代。
