I have requirement in AEM React SPA project, I have to display image and metadata on page

Forum|Forum|7 months ago
June 19, 2025
2 replies
573 views

to meet the above requirement I used out of box image component with this I can display the image on page, I want to display the metada as well on the page .

Best answer by Madhur-Madan

You can check the fields being exposed via model.json
{
"src": "/content/dam/my-site/avatar.jpg",
"alt": "Profile picture of John",
"title": "John's Avatar",
"caption": "This is John's profile image.",
"uuid": "12345-abcde"
}

on the react side something like this could be done. Make the necessary imports

const ImageWithMetadata = (props) => {
  if (!props || !props.src) {
    return null;
  }

  return (
    <div className="image-with-metadata">
      <img src={props.src} alt={props.alt || ''} title={props.title || ''} />
      <div className="metadata">
        {props.title && <h3>{props.title}</h3>}
        {props.caption && <p>{props.caption}</p>}
        {props.alt && <p>{props.alt}</p>}
      </div>
    </div>
  );
};

ImageWithMetadata.defaultProps = {
  src: '',
  alt: '',
  title: '',
  caption: ''
};

// Map to AEM core image component resource type
export default MapTo('core/wcm/components/image/v2/image')(ImageWithMetadata);

Madhur-Madan

Community Advisor

Hi @anilkumar9
In an AEM React SPA project, to display both an image and its metadata like alt text, title, or caption on the page, you can use the out-of-the-box Core Image Component, which already exposes metadata through the model JSON(/model.json or page model)). On the React side, you can extend your component to render these metadata fields by accessing properties like props.alt, props.title, and props.caption along with the image itself.

Thanks,
Madhur

Madhur-Madan

Accepted solution

Community Advisor

You can check the fields being exposed via model.json
{
"src": "/content/dam/my-site/avatar.jpg",
"alt": "Profile picture of John",
"title": "John's Avatar",
"caption": "This is John's profile image.",
"uuid": "12345-abcde"
}

on the react side something like this could be done. Make the necessary imports

const ImageWithMetadata = (props) => {
  if (!props || !props.src) {
    return null;
  }

  return (
    <div className="image-with-metadata">
      <img src={props.src} alt={props.alt || ''} title={props.title || ''} />
      <div className="metadata">
        {props.title && <h3>{props.title}</h3>}
        {props.caption && <p>{props.caption}</p>}
        {props.alt && <p>{props.alt}</p>}
      </div>
    </div>
  );
};

ImageWithMetadata.defaultProps = {
  src: '',
  alt: '',
  title: '',
  caption: ''
};

// Map to AEM core image component resource type
export default MapTo('core/wcm/components/image/v2/image')(ImageWithMetadata);