Image

Overview

The AEM Image component renders an image using data from the AEM Image Model provided by the backend. It is designed for use within AEM-integrated React applications, ensuring that image assets and metadata are handled according to AEM best practices.

Some properties extend the base AEM model to provide additional features such as hover zoom and custom CSS classes.

Properties

Prop	Type	Description	Optional	From AEM Image Model
`fileReferenceRendition`	`string`	The image rendition file reference from AEM.	no	✅
`finished`	`boolean`	True if the image has been processed by Scene7 and is finished.	no	✅
`published`	`boolean`	True if the image has been processed by Scene7 and is published.	no	✅
`dynamicAssetFallBack`	`string`	Fallback asset URL if the dynamic asset fails to load.	no	✅
`dynamicAssetSource`	`string`	URL for the dynamic asset, with width/height based on breakpoints.	yes	✅
`altText`	`string`	Alternative text for accessibility.	yes	✅
`aspectRatio`	`string`	Aspect ratio of the image (default: “16by9”).	yes	✅
`decorative`	`boolean`	If true, the image is decorative and ignored by assistive tech.	yes	✅
`lazyloadEnabled`	`boolean`	Enables lazy loading for the image.	yes	✅
`smartCropSelection`	`CROP_SELECTION`	Smart crop selection: e.g., `landscape`, `portrait`, or `none`.	yes	✅
`clickBehaviour`	`CLICK_BEHAVIOUR`	Defines click behavior: `ENLARGE` (overlay), `LINK` (navigate), or `DEFAULT`.	yes	❌
`link`	`AssetLinkModel`	Link model associated with the image.	yes	❌
`className`	`ClassValue`	Additional CSS class(es) for the image.	yes	❌
`enableHoverZoom`	`boolean`	Enables zoom-on-hover functionality.	yes	❌

Example Usage

import { Image } from '@tmedxp/aem-react-components/atoms/image';

const ImageAEMExample = () => (
  <Image
    fileReferenceRendition="/content/dam/toyota/sample-image.jpg"
    finished={true}
    published={true}
    dynamicAssetFallBack="/content/dam/toyota/fallback-image.jpg"
    dynamicAssetSource="https://scene7.com/is/image/Toyota/sample-image"
    altText="Sample Toyota vehicle image"
    aspectRatio="16by9"
    decorative={false}
    lazyloadEnabled={true}
    smartCropSelection="Landscape"
    clickBehaviour="DEFAULT"
    className="my-custom-image-class"
    enableHoverZoom={true}
  />
);

export { ImageAEMExample };

Additional Resources

Storybook Demo: View in Storybook