How to get & display image on the Page | Community
Skip to main content
T
Tessa_learner1
Level 4
July 1, 2022
Solved

How to get & display image on the Page

  • July 1, 2022
  • 2 replies
  • 876 views

Hello all, 

 

I am trying to create a custom image component for that I need to get and display the image on the AEM page. In what are the ways I can do this and how to do? I tried with valuemap but not getting the exact results. Can anyone help me?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Mohit_KBansal

As mentioned by Arun, Check image core component implementation [1], and follow the same approach.
On a high level, the code should look like this:

public class ImageModel {
    @ValueMapValue
    private String fileReference;

    public String getFileReference() {
        return fileReference;
    }
}

 

[1] https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wcm/components/image/v3/image/image.html 

2 replies

Mohit_KBansal
Adobe Employee
Mohit_KBansalAdobe Employee
Adobe Employee
July 1, 2022

The requirement is a bit unclear to me. Will your image component has a dialog to select an image or image component read an image from the page property?

    T
    Tessa_learner1Author
    Level 4
    July 1, 2022

    yes , I have a dialog with image & text field . And I want to retrive them and display on page using sling model. 

     

      Mohit_KBansal
      Adobe Employee
      Mohit_KBansalAdobe EmployeeAccepted solution
      Adobe Employee
      July 1, 2022

      As mentioned by Arun, Check image core component implementation [1], and follow the same approach.
      On a high level, the code should look like this:

      public class ImageModel {
    @ValueMapValue
    private String fileReference;

    public String getFileReference() {
        return fileReference;
    }
}

       

      [1] https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wcm/components/image/v3/image/image.html 

        arunpatidar
        Community Advisor
        arunpatidarCommunity Advisor
        Community Advisor
        July 1, 2022

        Please check the core component implementation

        https://github.com/adobe/aem-core-wcm-components/tree/main/content/src/content/jcr_root/apps/core/wcm/components/image 

         

        or check the implementation that I used, which basically uses core image but with custom component  component https://github.com/arunpatidar02/aemaacs-aemlab/pull/2/files  

        Arun Patidar
          Terms & ConditionsAccessibility statement

          Loading footer...