09. Getting Optimized Images

由于我们只需要展示卡片上的图片大小，而图片实际尺寸却很大，因此需要优化。

RAWG 的 API 支持通过修改链接的方式裁剪图片大小，因此我们需要在图片链接的 media 后插入裁剪参数 crop/length/width。

image-url.ts
1
2
3
4
5
export default function getCroppedImageUrl(url: string) {
  const target = "media/";
  const index = url.indexOf(target) + target.length;
  return url.slice(0, index) + "crop/600/400/" + url.slice(index);
}

假设 index = url.indexOf(target) + target.length，那么：

  • url.slice(0, index) => https://media.rawg.io/media/
    • 从 0 到索引处（包含索引）
  • url.slice(index) => games/618/618c2031a07bbff6b4f611f10b6bcdbc.jpg
    • 索引处前全部切掉（不包含索引）

评论