Bootstrap图片占位符需用CSS固定宽高+灰色背景（#e9ecef）防布局抖动，推荐ratio类配合::before伪元素实现响应式占位，加载失败时通过onerror添加img-broken类显示fallback图标，懒加载下应默认启用占位并解耦加载生命周期。
图片加载前显示灰色方块占位符
bootstrap 本身不提供图片加载占位符（placeholder）功能，img 标签也没有内置“加载中”状态。所谓“灰色方块”，其实是靠 css 强制固定宽高 + 背景色模拟出来的视觉占位，本质是提前预留空间、防止布局抖动。
常见错误是只加 width 和 height 属性却不设 background-color，结果图片加载前留白一片，用户误以为没内容；或者用 object-fit: cover 但容器没设宽高，导致占位失效。
- 必须给
img或其父容器明确的width和height（推荐用类如ratio ratio-1x1或自定义 class） - 用
background-color: #e9ecef（Bootstrap 的$gray-200）模拟默认占位色，比纯白更显“未加载” - 避免用
src指向空字符串或data:协议——部分浏览器会触发 404 请求或报Failed to load resource
用 Bootstrap 5 的 ratio 类配合伪元素占位
Bootstrap 5 内置的 ratio 工具类能基于 padding-top 实现响应式宽高比容器，适合封面图、头像等场景。但它不自动渲染占位背景，需手动补一层 ::before。
典型使用场景：卡片列表里的商品图、文章缩略图，需要统一比例且不能因图片加载慢而撑开布局。
- 给外层容器加
ratio ratio-4x3，再加自定义 class 如img-placeholder - 用 CSS 设置
.img-placeholder::before为绝对定位、全覆盖、带背景色的伪元素 -
img本身设position: relative; z-index: 1;，确保加载后盖住占位层 - 注意：Safari 对
aspect-ratio支持较晚，ratio类在旧版仍更稳妥
.img-placeholder::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #e9ecef;
}
加载失败时显示 fallback 文字或图标
网络中断、路径写错、CORS 限制都可能导致 img 加载失败，此时仅靠灰色块不够友好。Bootstrap 没有 onerror 封装，得靠原生事件或 CSS :not(:loading) 配合 JS。
最轻量的做法是内联 onerror，但要注意它不会触发 CSS 动画，也不能复用逻辑；更健壮的是用 IntersectionObserver + img.naturalWidth === 0 判断失败。
- 简单项目可用：
<img src="..." onerror="this.classList.add('img-broken'); this.alt='图片加载失败'"> - 搭配 CSS：
.img-broken { background: #f8f9fa url('data:image/svg+xml;utf8,<svg...>') center/1.5rem no-repeat; } - 避免在
onerror里反复设置src，可能造成无限循环请求 - CDN 图片建议加
crossorigin="anonymous"，否则naturalWidth在某些情况下读不到
懒加载（loading="lazy"）与占位符的冲突点
启用原生懒加载后，img 进入视口前不会触发 load 事件，但占位符需在首屏就可见。如果只依赖 JS 监听 load 去移除占位样式，首屏图片可能长期卡在灰色块状态。
关键不是禁用懒加载，而是让占位逻辑和加载生命周期解耦：占位样式默认开启，加载成功或失败后统一清除。
- 不要用
img.addEventListener('load', ...)初始化占位——它对已缓存图片可能不触发 - 推荐方案：所有
img默认带class="img-loading"，JS 启动时立即检查naturalWidth > 0或complete属性 - 服务端渲染（SSR）页面要注意：Node.js 环境无
Image对象，判断逻辑需降级 - Webpack/Vite 用户可借助
url-loader或image-minimizer-webpack-plugin把小图转 base64，天然规避加载失败
真正难的不是加个灰色块，而是让占位行为在缓存、懒加载、服务端渲染、图片跨域各种边界条件下保持一致。很多团队最后发现，最稳的方式是服务端返回带宽高信息的 JSON，前端用它提前渲染容器尺寸，再交由 CSS 控制占位样式——而不是指望某个 JS 库自动搞定一切。
