Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How to Read & Display Image File in AEM 6.5

Avatar

Level 2

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

 

Ashok884_0-1640854490061.png

 

 

 

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.

Ashok884_1-1640854489787.png

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

 

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

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