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

[Anilkumar9]

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 .

[Madhur-Madan]

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]

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]

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-as...

Thanks