Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Use image in HTL uploaded from fileupload

Avatar

Level 2

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
Community Advisor

@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

1 Reply

Avatar

Correct answer by
Community Advisor

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