如何高效从PokéAPI获取并展示30只宝可梦图片？

PokéAPI的宝可梦图片有固定命名规则，完全不需要调用每个宝可梦的详情接口就能直接获取，这是最高效的方案。

核心思路 #

宝可梦的官方 sprite 图片遵循统一的URL格式：

https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/{id}.png

其中{id}是宝可梦的编号（比如妙蛙种子是1，皮卡丘是25）。

具体步骤 #

1. 调用列表接口（比如https://pokeapi.co/api/v2/pokemon/?limit=30&offset=0）获取30个宝可梦的基础数据，每个条目里的url字段（如https://pokeapi.co/api/v2/pokemon/1/）可以直接提取出宝可梦的id（取URL最后一段数字）。
2. 用提取到的id替换固定URL里的{id}，直接拼接出图片地址，无需再请求详情接口。

代码示例（JavaScript + Fetch） #

// 获取30个宝可梦的列表数据
fetch('https://pokeapi.co/api/v2/pokemon/?limit=30')
  .then(res => res.json())
  .then(data => {
    const pokemonList = data.results;
    // 遍历生成图片URL并处理渲染
    pokemonList.forEach(pokemon => {
      // 从URL中提取id
      const id = pokemon.url.split('/').filter(Boolean).pop();
      // 构造图片地址
      const imageUrl = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`;
      // 这里可以根据业务需求渲染图片，比如创建img元素插入页面
      const img = document.createElement('img');
      img.src = imageUrl;
      img.alt = pokemon.name;
      document.body.appendChild(img);
    });
  });

额外优化 #

如果需要高清官方艺术图或其他形态的图片，同样可以通过构造URL获取：

• 官方艺术图格式：

https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/{id}.png

• 一次性请求列表接口即可，30条数据的请求量完全在合理范围内，无需分批调用。

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