Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How to fetch image from Sling Model

Avatar

Level 6

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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.

View solution in original post

8 Replies

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

Avatar

Community Advisor

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

Avatar

Community Advisor

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

Avatar

Level 6

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

Avatar

Correct answer by
Community Advisor

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.

Avatar

Level 4

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