Image

Ready to use

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.

Note

The primary use of the Image component is within the Asset component, which supplies all required props for proper image rendering.

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.	✅	❌
loading	LOADING	Enable or disable the lazy loading. Enabled by default.	✅	❌
sizeVariant	SIZE_VARIANT	Defines size calculation variant, BREAKPOINT or UI. BREAKPOINT by default.	✅	❌

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 };