How to render image via Sightly

[ac6600]

I have created a dialog box wherein I've this image field with ability for drag and drop. Now can someone help me what exactly to write in HTL to render it in page. As of now, I can see the preview in dialog but I am unable to render it on page. Following are the snaps of the dialog. Incase if its needed the name of the node is emailIcon.

Please help me out. Thanks in advance.

@arunpatidar @BrianKasingli @DEBAL_DAS @SantoshSai @Sachin_Arora_ @lukasz-m @HeenaMadan 

[BrianKasingli · Accepted solution]

Possibly you may have your Touch UI XML configuration wrong, try this (I have tested this, and it works!)

Touch UI Configuration

<file
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
    class="cq-droptarget"
    fileNameParameter="./fileName"
    fileReferenceParameter="./fileReference"
    mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"
    name="./file"/>

Sightly Code

 <img src="${properties.fileReference}"/>

Check out the Granite UI 1.0, Touch UI XML, more examples here, https://sourcedcode.com/blog/aem/aem-granite-ui-1-0-form-components-xml-cheat-sheet-reference-guide#...

 

[ac6600]

Hi @BrianKasingli thanks a lot for your help. The fileReferenceParameter was missing in the config. Once again thank you!

[HeenaMadan]

@ac6600 Add below code in _cq_dialog_/content.xml

<imagePath allowUpload="{Boolean}false"
                                      autoStart="{Boolean}false"
                                      class="cq-droptarget"
                                      cq-msm-lockable="./file"
                                      fieldDescription="Choose Image "
                                      fieldLabel="Logo Image"
                                      fileReferenceParameter="./fileReference"
                                      jcr:primaryType="nt:unstructured"
                                      mimeTypes="[image/gif,image/jpeg,image/png,image/webp,image/tiff,image/svg+xml]"
                                      multiple="{Boolean}false"
                                      name="./imagePath/file"
                                      sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
                                      title="Drag to select image"
                                      required="{Boolean}true"
                                      uploadUrl="${suffix.path}"
                                      useHTML5="{Boolean}true"/>

In sling model add below line of code

 @Getter
    @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL, name = "fileReference")
    private String imageSrc;

and in component HTML  file

<sly data-sly-use.myModel="com.project..models.MyModel">
${myModel.imageSrc} //prints image path
<img src="${myModel.imageSrc}"/> //render image
</sly>

If you want to access image directly in sightly then use

<img src="${properties.fileReference}"/>

[ac6600]

@HeenaMadan Thank you for such a detailed explanation. It's of great help to beginners like us 

[naina01]

Thanks @HeenaMadan 

I want to use model to get image. It worked. 

[Shivanandh]

hii @HeenaMadan   ive used same code as youve mentioned but im not getting in the page im getting this error . there are no particular logs for this error since im attatching screenshots could you please tell me what is the error or mistake ive made.