The image field is used to manage image files.
It is suitable for managing images used in content, such as blog post thumbnails, product images, and staff profile photos.

How to Upload Data

1. Clicking on the image field will display the "Media Management" modal.
2. Select an already uploaded image or upload a new image using the [+ Upload] button.
3. Click on the image you want to use and press the [Use this image] button to confirm your selection.

※ You can also upload or select files by dragging and dropping them directly into the field.

Notes

• The file name is displayed at the bottom left of the image.
• Hovering over the image will show a zoom button (magnifying glass icon); clicking it will display a larger preview.
• Clicking the [×] button that appears when hovering over the image will deselect it.

Please refer to the following documentation for uploading using the API and CSV.

Advanced Settings

Response Format of GET API

Please refer to the documentation below for details.

How to Use in Frontend

The image field returns an object containing information such as the uploaded image's url, width, height, and alt.
※ Depending on the file extension and settings, url may not include other keys.
You can display the image by specifying the returned url directly in the src attribute, and you can set the display size by specifying width and height.
Below is an implementation example using Next.js.

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

  // Fetch data using the microCMS JavaScript SDK (https://github.com/microcmsio/microcms-js-sdk)
  const data = await client.getListDetail({
    endpoint: "blog",
    contentId: slug,
  });

  return (
    <main>
      {/* imageField is the field ID. Please replace it with the actual field ID */}
      <Image
        src={`${data.imageField.url}?w=800&fm=webp`} // Specify the image API
        alt={data.imageField.alt || ''}
        width={data.imageField.width}
        height={data.imageField.height}
      />
    </main>
  );
}