第一张轮播图空白或不显示的常见原因有三：一是.carousel-item缺少active类，二是轮播图在display:none容器中初始化导致尺寸为0，三是图片路径错误或加载失败。
轮播图第一张空白或不显示的常见原因
第一张没出来，大概率不是 JS 报错，而是结构、样式或初始化时机出了问题。最常踩的坑是 .carousel-item 缺少 active 类，或者 .carousel-inner 容器被意外隐藏/尺寸为 0。
-
.carousel-item必须有且仅有一个带active类——Bootstrap 不会自动补全；如果 HTML 里漏了，首张就完全不可见 - 若轮播图在
display: none的容器内（比如 Modal、Tab 面板），初始化时宽度算出是 0，导致图片渲染失败或错位 - 用了
background-image而非<img>标签：.carousel-item 默认overflow: hidden，背景图容易被截断或不触发加载 - CSS 加载失败或顺序错误：没引入 Bootstrap CSS，或
bootstrap.min.css在 JS 后加载，样式未生效就执行了 JS 初始化
检查 .carousel-item.active 是否真的存在
打开浏览器开发者工具，定位到 .carousel-inner，确认其子元素中是否真有一个 <div class="carousel-item active">。不是靠 JS 动态加的，必须写死在 HTML 里。
<ul><li>错误写法：<code><div class="carousel-item">（无 <code>active）
<div class="carousel-item active">，且该元素内有有效 <code><img src="..."> 或内容
active 会导致多张同时显示、布局错乱轮播图在 Modal 或隐藏容器中初始化失败
Modal 默认 display: none，此时调用 new bootstrap.Carousel() 或 data-bs-ride="carousel"，getBoundingClientRect() 返回全 0，轮播逻辑直接“失明”。
- 必须等 Modal 完全显示后初始化：监听
shown.bs.modal事件再创建实例 - 已有实例？先
dispose()再重建，否则新实例可能无法接管 DOM - 更稳妥的做法：在
shown.bs.modal回调里调用carousel.refresh()（适用于已存在但未正确计算尺寸的实例）
图片路径和加载状态被忽略
即使结构全对，<img src="xxx.jpg"> 路径 404 或跨域失败时，.carousel-item.active 仍存在，但内容为空白——容易误判为“轮播没启动”。
- 检查 Network 面板，确认图片请求返回 200，且响应类型是
image/* - 避免用相对路径如
./img/1.jpg，尤其在路由嵌套或服务器部署路径不一致时；优先用绝对路径或 CDN - 不要混用
background-image和空<img>：.carousel-item 上设 background 会被overflow: hidden截断，且不触发 loading 状态
active 类是否存在、容器是否可见、图片是否真实加载成功——这三个点卡住任何一个，都会让第一张彻底“隐身”。
