Components
Image

Image <ContzaImage />

React component that renders an image (<img /> element by default).

Props

Image component has all default props of <img /> element and also a few Contza specific props.

childrenName of the field or image renderer function (for example if would like to use Next.js's image component you could do it with the image renderer)
nameAlternative way to specify the name of the field (can be overrided by 'children' prop)

Examples

Here are a few examples how to use Image component.

Basic usage

Renders normal html image element with predefined 'src' attribute.

import { ContzaImage } from "@contza/react";
 
const Component = () => {
  return (
      <ContzaImage alt="Heading image">Heading image</ContzaImage>
  );
};
 
export default Component;

Using the "name" prop

Renders normal html image element with predefined 'src' attribute.

import { ContzaImage } from "@contza/react";
 
const Component = () => {
  return (
      <ContzaImage name="Heading: Image" alt="Heading image" />
  );
};
 
export default Component;

Using with Next.js Image component

import { ContzaImage } from "@contza/react";
import Image from "next/image";
 
const Component = () => {
  return (
    <ContzaImage name="Heading: Image" alt="Heading image">
      {(image) => <Image src={image.src} alt={image.alt} />}
    </ContzaImage>
  );
};
 
export default Component;
TextList