如何在JavaScript中根据类型名显示图标并渲染多类型宝可梦图标

问题核心：在字符串模板中嵌套map生成多类型图标时，直接将map结果赋值给单个<img>的src属性，导致数组被转为逗号分隔的字符串，无法正确渲染多个图标。

修复方案 #

修改displayPokemon函数中生成类型图标的代码，将每个类型映射为独立的<img>标签，再通过join('')拼接成完整的HTML字符串：

const displayPokemon = (pokemonss) => {
  cards.innerHTML = "";
  Promise.all(pokemonss).then((result) => {
    result.map((data) => {
      // 生成每个类型对应的img标签字符串，再拼接
      const typeIcons = data.types.map(type => 
        `<img src="${getTypeImg(type.type.name)}" alt="${type.type.name} type icon" class="type-icon">`
      ).join('');
      
      cards.innerHTML += `<div class="card">
          <div class="imgContainer">
            <img src=${
              data.sprites.other["official-artwork"].front_default
            } alt="${data.name} artwork" />
          </div>
          <div class="infoConatiner">
            <p>${data.name[0].toUpperCase() + data.name.slice(1)}</p>
            ${typeIcons}
          </div>
        </div>`;
    });
  });
};

关键说明 #

1. 原代码问题：data.types.map(...)返回的是URL数组，直接放入单个<img>的src会被浏览器解析为逗号分隔的字符串（比如url1,url2），这不是有效的图片地址，且仅生成一个<img>标签，无法展示多个类型。
2. 修复逻辑：
   • 用map遍历每个类型，为每个类型生成独立的<img>标签字符串，包含正确的src和alt属性
   • 用join('')将数组中的标签字符串拼接成完整的HTML片段，插入到模板对应位置，这样就能渲染出多个类型图标
3. 可选优化：可以给类型图标添加统一的CSS类（比如type-icon），方便控制尺寸、间距等样式。

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