Bootstrap 4 Carousel轮播图在ASP.Net Core首页不显示问题

• 校验核心依赖加载状态
  • 必须按顺序加载3个必要脚本：jQuery 3.x版本、popper.js 1.16.x版本、Bootstrap 4 官方JS文件，三者缺一不可，加载顺序错误也会直接导致组件失效
  • 确认Bootstrap 4核心CSS文件正常加载，无404报错，CSS缺失会导致轮播布局完全错乱
• 检查轮播DOM结构是否合规
  • 外层容器必须包含carousel类，需配置唯一id属性用于绑定指示器、控制按钮，要滑动效果还需额外加slide类
  • 所有轮播项必须包裹在带carousel-inner类的容器内，每个轮播项必须带carousel-item类，必须给任意一个轮播项添加active类，缺少该属性会导致所有轮播项默认隐藏，完全无内容显示
  • 指示器、控制按钮的data-target属性值必须和外层容器的id完全一致，大小写也要匹配
• 确认ASP.NET Core静态资源配置正确
  • 检查Program.cs（.NET 6及以上版本）或Startup.cs中已注册app.UseStaticFiles()中间件，未注册会导致所有本地CSS、JS、图片资源无法被访问
  • 资源路径推荐使用~/开头的应用根路径写法，比如<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>，避免相对路径在不同路由下加载失败的问题
• 排查脚本冲突问题
  • 不要同时加载Bootstrap 5相关资源，Bootstrap 5不依赖jQuery、API和DOM结构和4版本不兼容，混用会直接导致组件失效
  • 可在浏览器控制台输入$().carousel，如果返回undefined说明Bootstrap 4 JS未正确挂载，大概率是依赖加载顺序错误或者多版本jQuery冲突
• 校验轮播图片资源有效性
  • 单独访问轮播图地址确认可以正常加载，ASP.NET Core默认仅开放wwwroot目录下的静态资源访问权限，如果图片存储在其他目录需要额外配置静态资源规则

内容的提问来源于stack exchange，提问作者William Propst