如何使用JavaScript从API获取图片、替换域名并限制展示前6张，修复代码错误

原代码错误点 #

• slice(0,6)调用位置错误：原代码对图片URL字符串做截取，直接破坏了URL的完整结构，限制展示前6张的需求应该对接口返回的results数组做截取。
• 模板字符串语法错误：${}插值内部的replace语句末尾多写了多余分号，会导致渲染失败。
• DOM操作逻辑冗余：DOM更新代码放在了forEach循环内部，每遍历一个作品就重绘一次DOM，性能差且无必要。
• 变量声明不规范：全局声明了多个不必要的变量，容易造成全局作用域污染。

修正后代码 #

JavaScript代码 #

const url = 'https://api.adoreanime.com/api/pixiv/?type=member_illust&id=648285&page=1';

function fetchData(url) {
  fetch(url)
    .then(response => response.json())
    .then(data => {
      const cardHtmlList = [];
      // 截取前6条作品数据
      const showArtList = data.results.slice(0, 6);
      showArtList.forEach(art => {
        // 替换图片域名
        const fixedImgUrl = art.image_urls.square_medium.replace('i.pximg.net', 'i.pixiv.cat');
        // 拼接卡片HTML
        cardHtmlList.push(`
          <div class="card"> 
            <div class="card__image"><img src="${fixedImgUrl}" alt="image" ></div>
            <br>
            <span class="card__title"> ${art.title}</span>
          </div>
        `);
      });
      // 一次性更新页面内容
      document.querySelector('.card__wrapper').innerHTML = cardHtmlList.join('');
    });
}

fetchData(url);

CSS与HTML代码 #

原有CSS、HTML代码无逻辑错误，可直接正常使用。

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