【Astro × microCMS】アイキャッチ画像を表示する方法

//SDK利用準備
import { createClient } from "microcms-js-sdk";
const client = createClient({
  serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,
  apiKey: import.meta.env.MICROCMS_API_KEY,
});

//型定義
export type Blog = {
  id: string;
  createdAt: string;
  updatedAt: string;
  publishedAt: string;
  revisedAt: string;
  title: string;
  content: string;
  //アイキャッチを読み込む為に追加
  eyecatch: {
    url: string,
    height: number,
    width: number
  };
  category: {
    id: string;
    name: string;
  };
};
export type BlogResponse = {
  totalCount: number;
  offset: number;
  limit: number;
  contents: Blog[];
};

//APIの呼び出し
export const getBlogs = async (queries?: any) => {
  return await client.get<BlogResponse>({ endpoint: "blogs", queries });
};
export const getBlogDetail = async (contentId: string, queries?: any) => {
  return await client.getListDetail<Blog>({
    endpoint: "blogs",
    contentId,
    queries,
  });
};

response.contents.map((content: any) => (
　<li>
　　<img src={content.eyecatch.url} alt="キーボードを触る写真" />
　　<a href={content.id}>{content.title}</a>
　</li>
))