How to Read & Display Image File in AEM 6.5 | Community
Skip to main content
A
Ashok884
Level 2
December 30, 2021
Solved

How to Read & Display Image File in AEM 6.5

  • December 30, 2021
  • 1 reply
  • 1371 views

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 & When i try to decode the generated encrypted string online image 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.
Best answer by lukasz-m

Hi @ashok884, could you please try to modify your code like below:

 

import org.apache.commons.io.IOUtils; // ... your code InputStream is = jcnode.getProperty(CommonConstant.JCR_DATA).getBinary().getStream(); String mimeType = jcnode.getProperty(CommonConstants.JCR_MIME_TYPE).getString(); // IOUtils.toByteArray(is) will produce base64 string representation teaser3x2 = "data:" + mimeType + ";base64" + Base64.getEncoder().encodeToString(IOUtils.toByteArray(is));

 

1 reply

lukasz-m
Community Advisor
lukasz-mCommunity AdvisorAccepted solution
Community Advisor
December 30, 2021

Hi @ashok884, could you please try to modify your code like below:

 

import org.apache.commons.io.IOUtils; // ... your code InputStream is = jcnode.getProperty(CommonConstant.JCR_DATA).getBinary().getStream(); String mimeType = jcnode.getProperty(CommonConstants.JCR_MIME_TYPE).getString(); // IOUtils.toByteArray(is) will produce base64 string representation teaser3x2 = "data:" + mimeType + ";base64" + Base64.getEncoder().encodeToString(IOUtils.toByteArray(is));

 

    Terms & ConditionsAccessibility statement

    Loading footer...