用html+原生css可构建轻量离线图片整理页：语义化figure+figcaption确保结构可维护，唯一id便于定位；缩略图与原图分离（data-src存高清路径），lazy加载优化性能；grid布局+gap控制响应式网格，aspect-ratio防变形；onerror降级+js批量监控保障错误可见性。
直接用 HTML + 原生 CSS 就能完成轻量、可离线、易维护的图片资源整理页面，不需要构建工具或后端。关键不是“堆图”，而是让每张图可定位、可降级、可预览、不拖慢加载。
用 figure + img 组合保证语义和结构可维护性
别用一堆 div 包图——后期加标题、删图、批量改样式都难定位。浏览器原生 figure 是专为图文单元设计的语义标签，配合 figcaption 能自然表达“这是哪张图+什么说明”。
-
figcaption必须写，哪怕只是文件名（如<figcaption>20240815-lake.jpg</figcaption>），方便后期用 JS 批量提取元数据或生成索引 - 每个
figure加唯一id（如id="img-20240815-lake"），调试时直接document.getElementById('img-20240815-lake')定位，比靠 class 或顺序可靠得多 - 避免在
figure上设display: contents—— Safari 旧版不支持，会导致布局塌陷；稳妥做法是display: inline-block; width: 100%，再内部 flex 居中
缩略图路径与原图分离：用 data-src 存高清路径
把 4MB 原图直接塞进 src 是最常见维护灾难：首屏卡顿、移动端反复失败、CDN 流量白跑。缩略图必须是独立小图（≤ 30KB，宽 ≤ 400px），原图路径只存在 data-src 中。
- 缩略图
img标签必须带loading="lazy"，浏览器自动跳过非视口图，减少初始请求 - 点击缩略图时，JS 取
this.dataset.src赋给弹窗里的大图src，不预加载未查看的原图 - 路径全部用相对路径，且统一从 HTML 文件所在目录算起（如
images/thumbs/lake-thumb.jpg和images/originals/lake.jpg），避免混用./和无前缀路径导致部署后失效
响应式网格用 grid-template-columns: repeat(auto-fit, minmax(...))
Flex + flex-wrap 在图片高矮不一、动态加载时极易断行错位、间隙不均。Grid 的二维控制更稳，且一行代码就能适配所有屏幕宽度。
- 核心写法：
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; - 必须用
gap控制间距，别用margin—— 否则首尾缩略图会多出半格空白，网格对齐逻辑全乱 - 若需兼容 IE10+，改用
grid-column-gap: 1rem; grid-row-gap: 1rem;，gap在 IE 不生效 - 图片宽高比差异大时，统一用
aspect-ratio: 4/3或包一层div并设overflow: hidden，防止拉伸变形破坏网格整齐度
图片加载失败时快速定位与降级
本地开发常因路径写错导致图挂了却看不出问题——alt 只显示文字，不提示哪里错了。得靠 JS 监控 + 控制台速查双保险。
- 单图监听：
<img src="xxx.jpg" onerror="this.src='placeholder.svg'; this.title='加载失败: '+this.src;"> - 批量监听（放在页面底部）：
document.querySelectorAll('img').forEach(i => i.addEventListener('error', e => console.warn('图片加载失败:', e.target.src))); - 开发阶段快速扫雷：控制台运行
Array.from(document.images).filter(i => i.naturalWidth === 0).map(i => i.src)，直接列出所有没加载成功的路径 - 所有
img必须有alt，否则无障碍访问失败，部分浏览器会默认渲染丑陋占位框
真正麻烦的从来不是“怎么放图”，而是当某天要批量重命名、换存储路径、排查某张图为什么在手机上不显示时，结构是否经得起查、属性是否留够线索、错误是否暴露得足够早。这些细节才是维护成本的分水岭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
