How to fetch image from Sling Model

This might help. https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-get-image-metadata-in-singtly/m-p/306237

Hi @sanjana12 

In Sling model, you need to follow the below steps :

1. Get your resource in Sling Model.

2. Get the path of the resource using resource.getPath and append to it the path where the Binary file is stored and store the entire path in a variable say imagePath

imagePath=resource.getPath()+"/photo/image";

3. Now write a getter method for the same

@Override
    public String getImagePath() {
        return imagePath;
    }

4. Now in sightly call the Model and then call the getter method as below :

<div data-sly-use.sampleModel="com.xyz.aem.tutorials.core.models.ComponentModel"></div>

<img src="${sampleModel.imagePath}" class="image" alt="User-Profile-Image">

Refer to : https://github.com/aemgeeks1212/geekstutorials/blob/main/core/src/main/java/com/geeks/aem/tutorials/core/models/Impl/AuthorProfileImpl.java

If this doesn't help you I would recommend you to go through the below YouTube tutorial 

https://youtu.be/BnU4AXWcKx4

Hi @sanjana12

In Sling Model kindly do the below,

1. Get The resource .

2. From the resource get the resource path and append to it the path of the Binary File and store it in the imagePath variable as below 

imagePath=resource.getPath()+"/photo/image";

3. Write a getter method to return the imagePath as below

@Override
    public String getImagePath() {
        return imagePath;
    }

4. In sightly call the model and then call the getter method to fetch the imagePath

<div data-sly-use.sampleModelObject="com.xyz.aem.tutorials.core.models.ComponentModel"></div>

<img src="${sampleModelObject.imagePath}" alt="User-Profile-Image">

Please refer to the below code :

https://github.com/aemgeeks1212/geekstutorials/blob/main/core/src/main/java/com/geeks/aem/tutorials/core/models/Impl/AuthorProfileImpl.java

If this doesn't help I would recommend you to go through the below Youtube Tutorial :

https://www.youtube.com/watch?v=BnU4AXWcKx4

Use the pathbrowser field in the dialog, you will get the path from here. After getting the path in Sling Model, use that object image src reference.

Please use below link for reference: 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-render-image-via-sightly/td-p/542959

refer same question here https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-render-image-via-sightly/td-p/542959