Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

[AEM Gems Webinar] Accelerating Experience Manager as a Cloud Service development with Rapid Development Environments
Adobe Summit 2023 | Complete list of AEM Sessions & Labs
SOLVED

Use image in HTL uploaded from fileupload

Avatar

Level 1

Hello

I have a problem, I don't know how to call in HTL an image that I uploaded through fileupload in a component, this is the structure of my fileupload in my cq:dialog

 

<fileupload

      jcr:primaryType="nt:unstructured"                                                                                                                  sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

      class="cq-droptarget"

      fieldLabel="Imagen lateral del vehículo"

      fileNameParameter="./fileNameSide"

      fileReferenceParameter="./fileReferenceSide"

      mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"

      name="./sideImage"/>

 

 

Thank you very much

1 Accepted Solution

Avatar

Correct answer by
Level 9

@Johnhenao10  Image source path would be saved in JCR with "fileReferenceParameter" property. Create the sling model for this component and use the below snippet

 

@Inject
private String fileReferenceSide;

public String getFileReferenceSide() {
return fileReferenceSide;
}

 

In your HTL, refer 

<sly data-sly-use.imageTest="<<Your Sling model class name>>"

<img class="section-container-card-2--image" src="${imageTest.fileReferenceSide@ context = 'uri'}" alt="${imageTest.fileReferenceSide}"/>

</sly>

 

Hope this help.

View solution in original post

0 Replies

Avatar

Correct answer by
Level 9

@Johnhenao10  Image source path would be saved in JCR with "fileReferenceParameter" property. Create the sling model for this component and use the below snippet

 

@Inject
private String fileReferenceSide;

public String getFileReferenceSide() {
return fileReferenceSide;
}

 

In your HTL, refer 

<sly data-sly-use.imageTest="<<Your Sling model class name>>"

<img class="section-container-card-2--image" src="${imageTest.fileReferenceSide@ context = 'uri'}" alt="${imageTest.fileReferenceSide}"/>

</sly>

 

Hope this help.