Image

Description

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

AssetMetadata

Prop	Type	Description	Optional	From AEM Image/Video Model
`type`	`AssetType`	The asset type: e.g., `Image`, `Video`.	✅	✅
`path`	`string`	The asset path exported from the backend.	✅	✅
`domain`	`string`	The Scene7 domain used to build the final asset URL.	✅	✅
`folder`	`string`	The folder path where the asset has been placed.	✅	✅
`title`	`string`	The asset name.	✅	✅
`fileStatus`	`Scene7FileStatus`	The scne7 status: e.g., `PublishComplete`, `PublishIncomplete`,`PublishFailed` etc .	✅	✅
`status`	`AssetStatus`	Indicates the asset’s state, `Finished`, `InProgress`,`Failed` etc .	✅	✅
`assetState`	`AssetStatus`	Indicates the asset’s state, `Finished`, `InProgress`,`Failed` etc .	✅	✅
`altText`	`string`	Alternative text for accessibility.	✅	✅
`altLanguages`	`string[]`	Localized alt text values for different languages.	✅	✅
`publishTimeStamp`	`number`	Timestamp of the asset’s last publish event.	✅	✅
`scene7FileAvs`	`string`	Scene7 Adaptive Video Set or rendition identifier used to build the encodes video path.	✅	✅
`fileReference`	`string`	The original DAM file reference path.	✅	✅

ImageProperties

Prop	Type	Description	Optional	From AEM Image Model
`altText`	`string`	Alternative text for accessibility.	✅	✅
`smartCropSelection`	`CROP_SELECTION`	Smart crop selection: e.g., `landscape`, `portrait`, or `none`.	✅	✅
`damMetadata`	`AssetMetadata`	The asset metadata exported from BE.	❌	✅
`decorative`	`boolean`	If true, the image is decorative and ignored by assistive tech.	❌	✅
`clickBehaviour`	`CLICK_BEHAVIOUR`	Defines click behavior: `ENLARGE` (overlay), `LINK` (navigate), or `DEFAULT`.	✅	❌
`link`	`AssetLinkModel`	Link model associated with the image.	✅	❌
`className`	`ClassValue`	Additional CSS class(es) for the image.	✅	❌
`enableHoverZoom`	`boolean`	Enables zoom-on-hover functionality.	✅	❌
`usePlaceholder`	`boolean`	Renders a simple placeholder instead of loading the actual image.	✅	❌

Example Usage

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

const ImageAEMExample = () => (
  <Image
    altText="Sample Toyota vehicle image"
    enableHoverZoom={true}
    smartCropSelection="Landscape"
    clickBehaviour="default"
    className="my-custom-image-class"
    aspectRatio="is-9-16"
    decorative={false}
    lazyloadEnabled={false}
    damMetadata={{
      assetState: 'processed',
      type: 'Image',
      path: 'toyotaeuropetest/Hero-Image-2-3',
      domain: 'https://scene7.toyota.eu/',
      folder: 'toyotaeuropetest/qa-foundation/dam-asset-metadata/',
      title: 'Hero-Image-2-3',
      fileStatus: 'PublishComplete',
      status: 'Finished',
      altText: 'Alt',
      altLanguages: [],
      publishTimeStamp: 1_765_969_735_882,
      scene7FileAvs: '',
      fileReference:
        '/content/dam/qa-foundation/dam-asset-metadata/Hero-Image-2.png',
    }}
  />
);

export { ImageAEMExample };

Additional Resources

Storybook Demo: View in Storybook