JavaScript中Map遍历与Swiper轮播图的渲染异常问题

你遇到的核心问题是：document.querySelector(".imgdata") 只会选中DOM中第一个带有.imgdata类的元素，所以你把所有拼接好的<img>标签都塞进了第一个轮播项里，其余轮播项自然没有内容。

下面提供两种可行的修复方式，你可以根据需求选择：

方式一：对应已有轮播项填充图片 #

这种方式适用于你提前确定轮播项数量和接口返回图片数量一致的场景：

修改你的JS代码如下：

let linkApi = "https://picsum.photos/v2/list?limit=4";
// 先声明Swiper变量，方便后续更新
let swiper;

fetch(linkApi)
  .then((res) => res.json())
  .then((data) => {
    console.log(data);
    // 获取所有带.imgdata类的轮播项容器
    const slideContainers = document.querySelectorAll(".imgdata");
    // 遍历数据，将每个图片对应到一个轮播项
    data.forEach((value, index) => {
      // 避免数据数量超过轮播项数量导致报错
      if (slideContainers[index]) {
        // 给每个容器单独设置单张图片的HTML，注意给src加引号避免URL特殊字符问题
        slideContainers[index].innerHTML = `<img src="${value.download_url}" alt="轮播图片">`;
      }
    });
    // 更新Swiper实例，让它识别新的内容布局
    swiper.update();
  })
  .catch((err) => {
    console.log(err);
  });

// 初始化Swiper
swiper = new Swiper(".mySwiper", {
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

关键说明 #

• 使用document.querySelectorAll(".imgdata")获取所有匹配的轮播项容器，返回的是一个可遍历的NodeList
• 通过forEach的索引index，将单个图片与单个轮播项一一对应
• 修改内容后调用swiper.update()，让Swiper重新计算布局，确保轮播功能正常

方式二：动态生成轮播项（更灵活） #

如果接口返回的图片数量不固定，推荐直接动态生成所有轮播项，不需要提前写死HTML：

修改HTML #

<div class="swiper mySwiper">
  <div class="swiper-wrapper" id="swiperWrapper">
    <!-- 这里留空，后续动态生成轮播项 -->
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

修改JS代码 #

let linkApi = "https://picsum.photos/v2/list?limit=4";
let swiper;

fetch(linkApi)
  .then((res) => res.json())
  .then((data) => {
    console.log(data);
    const wrapper = document.getElementById("swiperWrapper");
    let slidesHtml = "";
    // 遍历数据，拼接所有轮播项的HTML
    data.forEach((value) => {
      slidesHtml += `<div class="swiper-slide imgdata"><img src="${value.download_url}" alt="轮播图片"></div>`;
    });
    // 将拼接好的HTML插入到轮播容器中
    wrapper.innerHTML = slidesHtml;
    // 初始化或更新Swiper
    if (swiper) {
      swiper.update();
    } else {
      swiper = new Swiper(".mySwiper", {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    }
  })
  .catch((err) => {
    console.log(err);
  });

关键说明 #

• 这种方式不需要提前固定轮播项数量，完全根据接口返回的数据生成对应内容
• 可以选择在数据加载完成后再初始化Swiper，或者先初始化再调用update()，两种方式都能正常工作

• 给<img>的src属性加上双引号，避免URL中包含特殊字符（比如&、?）导致解析错误
• 如果图片加载后Swiper的高度异常，可以在初始化时添加autoHeight: true配置，让轮播自动适配图片高度

内容的提问来源于stack exchange，提问作者Zuri Ruiz