Use image in HTL uploaded from fileupload

[Johnhenao10]

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

[Avinash_Gupta_ · Accepted solution]

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