How to fetch image from Sling Model

[Sanjana12]

How to fetch image object from Sling Model into Sightly? Please help

[Pradeep_Kumar_Srivastav]

This might help. https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-get-image-metadata-...

[Sanjana12]

I need to fetch the image path and map as resources. How to do it? Please help. I'm new to this concept

[ksh_ingole7]

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

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

https://youtu.be/BnU4AXWcKx4

[ksh_ingole7]

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

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

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

[Sanjana12]

What if I just want to drag and drop and not upload from local filesystem?

[ksh_ingole7 · Accepted solution]

If you want to drag and drop image already present in DAM, you can use below for Reference

Model - https://github.com/adobe/aem-core-wcm-components/blob/main/bundles/core/src/main/java/com/adobe/cq/w...

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

In this case you would be returning the fileReference to sightly.

[Shivam153]

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

[HeenaMadan]

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