Image

To add an image in the page builder directly from the page render. The Image component uses the Next.js image component under the hood for image optimization.

Property type

The Image component will interact with an ImageType property of your Block.

type ImageType = {
  src?: string;
  alt?: string;
  name?: string;
  height?: string;
  width?: string;
};

Component properties

The component is a wrapper of the Next.js image component so it heritate all its props.

As the Next.js Image component, the component needs to have a height/width except if layout='fill'.

Please read the NextJs image component documentation

type ImageProps = {
  slug: string;
  infoText?: string;
} & NextImageProps;

slug: The slug name of the block property to edit.
If it's used inside an array ⇒ arraySlug.${index}.imageSlug
infoText: To add info text, for example, the recommended size ⇒ "Recommended size: 54x54"
It also contains all the properties from the Next Image component (src, layout, height, width, etc...)

When an image is select, the properties will automatically received the height and width of the original picture size

Example

import { SuncelBlock, ImageType } from "@suncel/nextjs";
import { Image } from "@suncel/nextjs/components";

interface MyComponentProps {
  image: ImageType;
}

export const MyComponent: SuncelBlock<MyComponentProps> = ({ image }) => {
  return (
    <>
      {/* Add an temporary alt to prevent lint error */}
      {/* Just unconstruct the image properties it will provide all the properties to the component */}

      <Image slug='image' alt='tmp alt' {...image} />

      {/* To force a size, use the height and width props */}
      <Image slug='image' alt='tmp alt' {...image} height={64} width={64} />
    </>
  );
};

Text

Link