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.
1 Accepted Solution
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?
