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.
※ You can also upload or select files by dragging and dropping them directly into the field.
Please refer to the following documentation for uploading using the API and CSV.
Setting Item | Description |
|---|---|
Required Field | When enabled, input is required during submission. |
Description Text | This is the description text displayed on the submission screen. |
Image Size Limit | This restricts the values of the image's |
Default Value | You can set the default value for submissions. |
Please refer to the documentation below for details.
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>
);
}