画像フィールドは、画像ファイルを管理するためのフィールドです。
ブログ記事のサムネイル、商品画像、スタッフ紹介のプロフィール写真など、コンテンツ内で使用する画像を管理するのに適しています。

データの入稿方法

1. 画像フィールドをクリックすると「メディア管理」のモーダルが表示されます。
2. すでにアップロードされている画像を選択するか、[+ アップロード]ボタンから新しい画像をアップロードします。
3. 使用したい画像をクリックし、[この画像を使用する]ボタンを押すと選択が確定します。

※フィールドに直接ファイルをドラッグ＆ドロップしてアップロード・選択することも可能です。

補足

• 画像の左下にファイル名が表示されます。
• 画像にカーソルを合わせる（ホバー）と表示されるズームボタン（虫眼鏡アイコン）をクリックすると、拡大プレビューが表示されます。
• 画像にカーソルを合わせると表示される[×]ボタンをクリックすると、選択が解除されます。

API、CSVを利用した入稿については以下のドキュメントをご参照ください。

詳細設定

GET APIのレスポンス形式

詳細は以下のドキュメントをご参照ください。

フロントエンドでの利用方法

画像フィールドは、アップロードした画像のurl、width、height、altなどの情報を含むオブジェクトとして返されます。
※ 拡張子や設定によっては、url以外のキー自体が含まれない場合もあります。
返却されたurlをそのままsrc属性に指定することで画像を表示でき、widthとheightを指定することで表示サイズを設定できます。
以下はNext.jsの実装例です。

export default async function Page({ params }) {
  const { slug } = await params;

  // microCMS JavaScript SDK（https://github.com/microcmsio/microcms-js-sdk）を使用してデータを取得
  const data = await client.getListDetail({
    endpoint: "blog",
    contentId: slug,
  });

  return (
    <main>
      {/* imageFieldはフィールドIDです。実際のフィールドIDに置き換えてください */}
      <Image
        src={`${data.imageField.url}?w=800&fm=webp`} // 画像APIを指定
        alt={data.imageField.alt || ''}
        width={data.imageField.width}
        height={data.imageField.height}
      />
    </main>
  );
}