How to Read & Display Image File in AEM 6.5

[Ashok884]

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.

[lukasz-m · Accepted solution]

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));