How to get & display image on the Page

[Tessa_learner1]

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?

[Mohit_KBansal]

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?

[Tessa_learner1]

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

[Mohit_KBansal · Accepted solution]

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/wc... 

[arunpatidar]

Please check the core component implementation

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

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