Skip to main content
Ashok884
Level 2
December 30, 2021
Solved

How to Read & Display Image File in AEM 6.5

 

Hi All,

In AEM 6.5 I am trying to read the jcr:data (Binary) from jcr:content and convert it to base64 to display the image in frontend page level (HTML).

I can read the jcr:data and converted to base64 but when I am trying to display the same base64 image in HTML it is not properly loaded.

Kindly check below screenshots for your reference.

Does anyone have any ideas or other things I can check for as to why this would not work?

 

I have written the following java code to read the jcr:data from jcr:content and convert it to base64 to display the image in frontend page level (HTML).

 

 

 

And I got the base64 string as below.

 

"data:image/png;base64,iVBORxoAAABJSERSAAAAKwAAACsIBgAAAOFdccAAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAADP2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjhlYzY0NzhiLWJkNGUtYzE0Ni1iOTRhLTA3MTUzYjAyMzkwYSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2Q0Q4Qjg2NDQyMkMxMUVDQkYwRUVDNDY3NTExQkE5NSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2Q0Q4Qjg2MzQyMkMxMUVDQkYwRUVDNDY3NTExQkE5NSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjMuMCAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxNWJiN2ZjNi0wOWVkLWRjNDQtODQyMC0yMjIyYWVmNTM3MTMiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDplZTZkMGE4NS01ZjgzLTFiNDEtYTI5Ny1hN2VmNWJiNGM1MmIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Or44TAAADG0lEQVR42tSZXUiTURiA32WW1ZKIyHD9QUp/YL+SFyGLQrCbkkESxGhlP3YVdNGlJgRGBd30Zyuk4UWU1EU0kS5yFRF10cVai5KoyGTgSj/GLF3vu70bh7mf72/fTi88zum39zw73/nOd773WGKxGPwvMZN+zGm5ZGROC7IA+YkY1hMR98mErI6oQho/7chafm8V/v8L+Yi8Q54h/fxee8+qjNnIQeQwUpvnWBLfyOznv71CbiLdSFRNwzNUHnsEGUSuKRDNFrX8ecpzVD+D0gOrkedIF2IzaBhSnuuct9oo2SbkNVJXoIu8jvM36ZVtRe4i5QWelcq5P1atsnQRXUZKTJpGS7g9l1rZP4ib50wzg9q7we0rkl2C9JjYo5l6uIc98srS7ayiyHfW9sgpa0eaJVk0s09W2TbJ1i5t2WS3pn8TCcLOXtNkP5KuDD/psjRlONRmOV2/Lr50o9cChiM5hSZl1yOVarO8GByG3j838dcCRiX7pZaIm7Vk8X0Lg8/zxIyhsAXxJ2XXaMlAp7/d2QDtt/vhnC8AP44DMBweh+DXEOzbsQnmlc2C0D9xOOX2wr33Q3pkV4vDYKlRXVBTZQP7hlXQ9zIQHyIUF1sa9aZdJg6D+Uaesz0XeuHDWCT++xVHFFw/26DetjA+bDSGVezZUqNEQ+GxlKgYi61letKWirKjkj+FP4qyI5LLjoiyQcllg6KsX3JZvyhLz/IRSUUj7AcWqnVx+eg+sldC2Qf05EtrEHHV5ZG0Zz2ZlogPkSHJRL+z1zTZCaRTMtlO9sr4WEM1qLeSiAY/q7mewf4gJz/JIotS+8fZJ+ejuA85W2RZav+p0orMGS40FCOo3Q6lFRmKKeQ/eCWaFD+43Uk1ssnZP8o/t0wS7eab0kS2A/KVPP9Cohx/rIC34wjnd6VfUGplk0EV7xrEa7Col/N2KTlYzZ4C7bLs5ipJHz9rLTHFn7dzPsW7N1p2awaY5T8onu2CxNbS3Byf+YmtpcfIHeSLlm+pZx+MGjzP0BlaP6xEFkFi+ynKK/xPyGcdZyIV/wQYAC+hsu7D/JsOAAAAAElFTkSuQmCC"

 

When I am trying to display the same base64 image in HTML it is not properly loaded as showing below.

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Mayank_Tiwari
Mayank_TiwariAccepted solution
Adobe Employee
December 30, 2021

Can you please refer to the following links on how to do this:

 

https://stackoverflow.com/questions/17055049/cq5-how-do-i-render-an-image-by-inputstream-from-jcrdata

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/get-image-files-from-jcr-node-through-jcr-api/td-p/164915

 

Also, if this doesn't help then please post this on AEM Sites community, as this is not related to AEM Forms.

View in thread

4 replies

GirishBedekar
Level 8
December 30, 2021

Are you trying it in a form?

like xdp rendered in html5 form?

Translate
    Mayank_Tiwari
    Adobe Employee
    Mayank_TiwariAdobe Employee
    Adobe Employee
    December 30, 2021

    When I tried to decode this base64 string using online decoder, I am also getting the following only:

    It means that the base64 string you are passing is not correct. Can you please try to encode the actual image first using online encoder, to get the expected base64 string, and then compare the expected base64 string with yours? 

    Translate
      Ashok884Author
      Level 2
      December 30, 2021

      Thank you for your response.

       

      Yes i was forgot to mention that point.

      I have already observed that like encryption string is not a valid.

      But i want to know anything wrong in Base64 encryption logic which i have used or logic for reading the image binary file.

      Can you please help me on this?

      Translate
        Mayank_Tiwari
        Adobe Employee
        Mayank_TiwariAdobe EmployeeAccepted solution
        Adobe Employee
        December 30, 2021

        Can you please refer to the following links on how to do this:

         

        https://stackoverflow.com/questions/17055049/cq5-how-do-i-render-an-image-by-inputstream-from-jcrdata

        https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/get-image-files-from-jcr-node-through-jcr-api/td-p/164915

         

        Also, if this doesn't help then please post this on AEM Sites community, as this is not related to AEM Forms.

        Translate
          Terms & ConditionsAccessibility statement

          Loading footer...