I have requirement in AEM React SPA project, I have to display image and metadata on page | Community
Skip to main content
A
Anilkumar9
Level 3
June 19, 2025
Solved

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

  • June 19, 2025
  • 2 replies
  • 593 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);




2 replies

Madhur-Madan
Community Advisor
Madhur-MadanCommunity Advisor
Community Advisor
June 19, 2025

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
    Community Advisor
    Madhur-MadanCommunity AdvisorAccepted solution
    Community Advisor
    June 19, 2025

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




      rahulp76079001
      rahulp76079001
      Level 2
      June 23, 2025

      HI @anilkumar9 ,

       

      You can have a look at the Asset HTTP API to check if it serves your purpose.

       

      https://experienceleague.adobe.com/en/docs/experience-manager-65/content/assets/extending/mac-api-assets

       

      Thanks

        Terms & ConditionsAccessibility statement

        Loading footer...