图片路径不随html位置变动而失效的关键是统一使用以html文件为基准的相对路径（如images/photo1.jpg），禁用./前缀以防js拼接出错，配合全局error事件监听、内联svg兜底及css grid网格布局实现稳定展示。
直接用 <img> 标签堆图片，不是资源管理；真正能管起来的流程，必须有路径控制、加载反馈、错误兜底和展示组织这四个环节。
怎么让图片路径不随 HTML 位置变动而失效
本地开发时最常踩的坑是混用 ./images/ 和 images/ ——前者依赖当前 HTML 所在目录层级，后者依赖服务器根路径，一发布就 404。
- 统一用相对路径，且全部以 HTML 文件为基准：比如
index.html在站点根目录，所有图片路径写成images/photo1.jpg，不加./ - 避免在 JS 中拼接路径，改用
data-src存原始路径，加载时再解析，方便后续加 CDN 前缀或代理逻辑 - 构建阶段可加一层检查：运行
Array.from(document.images).filter(i => i.naturalWidth === 0)快速扫出挂掉的图
如何批量监听图片加载失败并自动降级
单个 onerror 属性写法脆弱，无法复用，也不支持动态插入的图；得靠事件委托 + 统一 fallback 策略。
- 别在每个
<img>上写onerror="this.src='...'"，改用全局监听：document.addEventListener('error', e => { if (e.target.tagName === 'IMG' && e.target.naturalWidth === 0) { e.target.src = 'placeholder.svg'; e.target.title = `加载失败: ${e.target.src}`; } }); - 降级图建议用内联 SVG（
data:image/svg+xml,base64），避免二次请求 - 开发期可在控制台快速验证：执行
[...document.querySelectorAll('img')].forEach(i => console.log(i.currentSrc, i.naturalWidth))
怎样用 CSS Grid 实现不卡顿、不断行的响应式图片网格
用 display: flex + flex-wrap 排图，最后一行经常只剩一张图贴左，间隙全挤右边——这不是样式问题，是布局模型选错了。
- 核心声明必须是：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px;，其中gap是必需项，不能用margin模拟 - 每张图外层套
<figure class="gallery-item"></figure>，内部设.gallery-item { display: inline-block; width: 100%; vertical-align: top; }，比display: contents兼容性更稳 - 防拉伸：给
<img>加width: 100%; height: 100%; object-fit: cover;，再包一层带aspect-ratio: 4/3的<div> <p>真正难的不是把图铺出来，而是当某张图路径错、尺寸炸、加载慢时，整个网格还能保持对齐、不塌陷、不跳动——这需要路径约定、错误监听、CSS 布局三者咬死，缺一不可。</p> </div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
