Bootstrap+Ajax+jQuery轮播组件添加active类后图片不显示求助

核心问题原因 #

• 所有动态生成的carousel-item未添加active类：Bootstrap轮播默认要求至少第一个轮播项带有active类才会触发渲染，无该类时所有轮播项默认都是隐藏状态。
• 动态插入DOM后未同步轮播状态：部分Bootstrap版本不会自动识别动态新增的轮播项，需要在插入完成后手动触发初始化。

修改后可运行的jQuery代码 #

$(document).ready(function() {
  // 加载轮播数据
  $.getJSON("/datas/json?id=8&q=status_carousel%:%Show", function(data) {
    $("#carousel").html('');
    var carousel_output = "";

    $.each(data, function (index) {
      // 仅给第一个轮播项添加active类
      var activeClass = index === 0 ? ' active' : '';
      carousel_output +=  `<div class='carousel-item${activeClass}'><img class='d-block w-100' src='${this.value}' alt='轮播图'></div>`;
    });
  
    $("#carousel").append(carousel_output);
    // 手动初始化轮播，适配动态插入的内容
    $('#carouselExampleControls').carousel();
  });
});

如果项目需要兼容不支持ES6模板字符串的低版本浏览器，可将轮播项拼接逻辑替换为以下写法：

carousel_output +=  "<div class='carousel-item" + activeClass + "'><img class='d-block w-100' src='" + this.value + "' alt='轮播图'></div>";

额外验证项 #

如果修改后还是无法显示，按顺序排查：

• 打开浏览器开发者工具的网络面板，确认/datas/json接口返回正常，且返回的value字段对应的图片链接可以正常访问
• 确认页面已经正确引入依赖，引入顺序必须为：jQuery > Bootstrap CSS > Bootstrap JS
• 检查是否有其他CSS规则覆盖了carousel-item的显示属性

内容的提问来源于stack exchange，提问作者Nurzam Faiz