Image Block - Contento

The Image block is great for a simple image output on your website. It only has an image field.

Front End

Content Model

The content model for the Image block is as follows:

image: Assets Field - Required

Code

The Image block uses the BlockData type from the Contento JavaScript SDK and the Image component from Next.js.

We do also have our own Image Component available that makes it easy to use the Contento Image Optimization API and automatically converts images to webp if you wish to use it.

import { BlockData } from '@gocontento/client'
import Image from 'next/image'

export default function ImageBlock({ block }: { block: BlockData }) {
  return block.fields.image.assets.length > 0 ? (
    <div className="py-9 md:py-16">
      <Image
        src={block.fields.image.assets[0].asset.url}
        alt={block.fields.image.assets[0].asset.description}
        className="prose mx-auto h-full w-full object-cover"
        width={176}
        height={176}
      />
    </div>
  ) : null
}