retrieving pictures stored as blob in the database and display it in the html

Question

i have a medium blob data type on my database, it is storing pictures with gif,jpg,png,bmp types.

i am retrieving the blob using jsf.

i have read this question -> Using Javascript to Display Blob but i was confused how he converted his blob to base64.

this is what i have done so far.

 var blob;
 var base64;
 var image;
    <ui:repeat value="#{testController.allItems}" var="item">
       blob = "#{item.logo}";
       base64 = btoa(blob);
       image = document.createElement('img');
       image.src = 'data:image/png;base64,'+ base64 ;
       $('#testDiv').append(image);
    </ui:repeat>

the above code just gives me a broken link pictures.

sample blob from inspect element

blob = "[B@2d8f2913";

and the image inside the div

<img src="data:image/png;base64,W0JAMmQ4ZjI5MTM=">

UPDATED my code based on Ian's suggestion

i created a method RenderLogo

public String RenderLogo(byte[] rawLogo) {
    String base64String = Base64.encodeBase64URLSafeString(rawLogo);
    return base64String;
}

now on my js:

 var base64;
 var image;
    <ui:repeat value="#{testController.allItems}" var="item">
       base64= '#{testController.RenderLogo(item.logo)}';
       image = document.createElement('img');
       image.src = 'data:image/png;base64,'+ base64;
       $('#testDiv').append(image);
    </ui:repeat>

it gives me a console error in inspect element

GET data:image/png;base64,_9j_4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP_sABFEdWNreQABA…CAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgP__Z  

this is whats written in the js when i inspect element

blob = '_9j_4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP_sABFEdWNreQABAAQAAAA8AAD_7gAOQWRvYmUAZMAAAAAB_9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx__wAARCADLAMgDAREAAhEBAxEB_8QAsgABAAIDAQEBAAAAAAAAAAAAAAUGAwQHAQIIAQEAAgMBAQAAAAAAAAAAAAAAAwQCBQYBBxAAAQQBAQQFBQsHDAMAAAAAAQACAwQRBSExEgZBUWEiE3GBkTIHobHB0UJSYnIjFBWCkqKyM3M28MLSQ5OzJDRUdDUW4eIXEQACAQMABwQJAwUAAwAAAAAAAQIRAwQhMUFREgUGYXGBwfCRobHR4SIyE2IUNPFCUjMWcoIV_9oADAMBAAIRAxEAPwD9UoAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAxy2K8X7WVkf1nBvvr1I8cktZi_FNN_1cP8AaM-Ne8L3GP5I70Zop4JRmKRsg-iQfeXjRkpJ6j7Xh6EAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEBHaprlSgC1x8Sfoibv_ACj0LOMGyK5eUe8rF3mHU7RI8TwY_mR930neplbSKU78pEaSSck5J3krMhPEB61zmkFpII3Eb0BJ0eY9SrEBz_Hj6WSbT5nb1g7aZNDIku0tGmazT1BuIzwTAZdC7f5usKCUGi7buqRvrElCAIAgCAIAgCAIAgCAIAgCAIAgCAhuYNc-5N-71zm04ZJ3hgPT5VJCFSvfvcOhaynPe57i55LnOOS47SSrBr2zxAEAQBAEB9RyPje18bi17TlrgcEFAnQueg62L8fhTYFqMbfpD5w-FV5wobGze4tD1ksoycIAgCAIAgCAIAgCAIAgCAIAgNfULjKdOSw7bwDut63HYAvYqrMLk-FVOfzTSTSvlkPFI8lzj2lW0qGrbq6s-EPDd0zSbWoSFsQ4Y2-vK7cPjKxlJIkt2nPUWipyzpkDR4jDO_pc_d-aNihdxsuxx4rtNz8L0zGPukP9m34ljxPeSfjjuRpXOWNNnaTE015OhzNoz2tPwLJXGiKePF6tBV9S0u1Ql4JhljvUkHqu_wDKnjJMp3Lbi9Jpr0jMtaxLWnZPEcSRnIPwI1U9jJp1R0Clajt1Y7EfqyDOOo7iPMVUaozawlxKpmXhkEAQBAEAQBAEAQBAEAQBAEBWecLR4oKoOzBkePcb8KmtLaU8qWpFaUxTM9GpJbtx12b5DgnqG8nzBeSdEZQjxOhdp59O0TS3TSnwqtZuXHpJ-FzitdlZMbUHcm_pRusbGlckrcFpZyrmDnvWtVlc2KV1OnnDIIiWkj6bhtPvL55n89v320nwQ3LzfojucLk9myqtcU978kVwSSB_GHEPzniBOc-Vafida7Ta8KpQs_LvP-saZKyO1I67Szh0ch4ntHWx52-Y7Fu-X8-vWGlN8cNz1-DNRncmtXlWK4J9mrxR1LNDWdMa-NwlrWG8Ucg3jt7CCvoWPfjcipwdYs4bIx3FuE1Roo1qtJWsSQSevG4tPb2-dbBOpppRo6GJDwtHJ9omOeq4-oRIwdh2O-BQ3VtLuLLQ0WNQlsIAgCAIAgCAIAgCAIAgCAICk8zvLtYmB-QGNH5oPwqzb1GuyH9bIpZkBYOT4A61PMRtjYGj8s_-qiuvQWsVaWyF9q-pSeJS01pxHwmxKOskljPRhy4XqrJdYWlq-5-5eZ3PTdhUlc26vN-Rz1cedQEAQHSPZRqUj69zTnklkJbND2B-Q8ekArtelcluM7b2aV46zkuo7CUo3Ft0PyJHm6FrNQjkH9ZGOLytJHvYXbWnoOKyl9VSCUhWJjlSQt1UN-fG5vvO-BR3dRYxn9Rc1XNgEAQBAEAQBAEAQBAEAQBAEBSOZWkazOT8oMI_MA-BWbeo1uR97ItZkJY-TZQJrMXS5rXDyNJH85RXkW8R6Wiue1ik9t-ldx9nJEYSeoscXe7xrgeq7LVyFzY409Tr5nd9N3VwShtTr6_6FDXJnShAEB0P2TU5OLULhGI8Mhaegu2ud6NnpXY9KWX9c9mhefwOW6kur6IbdLJjnCRpuwxjeyPJ_KJ-Jdza1HD5T-pEApSqS_KzC7V2n5jHE-jHwrC7qJ8ZfWXRVjYhAEAQBAEAQBAEAQBAEAQBAVXnCsW2IbIHde3gce1pyPcKntPYUcqOlMrylKpt6VeNK9HPvaDiQDpadhXko1RnbnwyqW3W9Ipa9pLqsju5IA-CZu0tdjuvH8ty1GfgxybTty8HuZv8LMlYuKcf6o45rWgano9kwXYi0ZIjmG2N462u-DevmubgXcaXDNdz2PuO_wATNt341g_DaiOVItEnoXLmqa1ZEVSM-GD9rYdsjYO09fYNqv4PLruTKkFo2vYinmZ1vHjWb07trOyaXp1HQtIZWjPDBXaXSSHe529zj2k_EvpWFhxsW1bhs9r3nz_My5Xpu5L-hTdQuOuXJbDtnGe6Opo2AehbWKoqGjuT4nU1l6YFl5OrHisWSNmBG0_pO-BQ3XsLmLHWyzKEuBAEAQBAEAQBAEAQBAEAQBAaWsUBeoSQj9oO9EfpDd6dyyhKjI7sOKNChOa5ri1ww4HBB3ghWjVniAl9G1-Wh9jKDJVJzwj1m5-b8SwnCpPavuOh6i0RXNL1GExh0c7H-tC8A-ljlVuWk1SSqjYWr-msXRmsOVOWhJ4n4ZX4urw28P5uMKj_APKxa1_HH1F7_wCjkUpxy9ZsT6hpenRcDnsiDNjYYwM-QNar9u1RUiqIoXLyrWT0lV1nXZtQPhtBjrNOQzpd2uVmEKGvu3nLuItZkJ9RsfI9rGDie4hrWjpJ2BAlUv8AplJtKlHXG1zRl563HaVVk6s2tuHDGhtLEzCAIAgCAIAgCAIAgCAIAgCAICt8yaG55derNy7fPGOn6Q-FTW57GU8iz_cisKYphAEB9-NMW8PG7h6snCUPas-EPAgCAtfLmhugxcstxKR9lGfkg9J7VBcnXQi9j2aaWWBRFoIAgCAIAgCAIAgCAIAgCAIAgCAICD1blmGy501UiKY7XMPqOPm3FSxuU1la7jp6VrKxboW6j-GxE6PqJGw-Q7iplJMpSg46zXXpiEAQGzT0-5cdw14nP63bmjyuOxeOSRnG25ai06Ry3BULZrBE1gbQPkNPZ1ntUErlS7ax1HS9ZMqMsBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQHjmNe0tcA5p3gjIQNGhNoGkSnLqzWnrZlnuNICzU2ROxB7DB_1bSM54H46uIr38rMf20DYh0HSYTltZpPW_L_ANYleObMlZgthvNa1oDWgBo3AbAsCU9QBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAfMsjIo3SPOGMBc49QAyUR43Qq1Pmi47UGeO4Cq9-C3AHCHbBt7FO7aoUoZL4tOotagLwQHjnNa0ucQ1rRkk7AAF43TSz1KpR9e9p9StI6DSohae04Nh5Iiz9EDvO9xctndTQg-GyuN73q-fsOiw-n5TXFdfCt235FcPP3Olok1n8Izuhga4Ds7zXrTPn2dc-1-qK-DNsuTYkPuXrl_Qy1PabzHXkxaZFYaPWa9nhu8xbjHoWdrqXJg_rUZeFPcYXOn8eS-luPjUvPLfOWla4PDjzBcAy6tIdpA3ljtzh7vYuq5dzi1laF9M_8AF-W85zP5Xdx9L0w3_HcTy2xrDllz2l8xQ254mNr8McjmNyx2cNcQPlLgr3UmTGbS4dDez5nZ2uQY8opvi0rf8jD_APUOZfm1_wCzd_SUf_T5X6fV8zP_AJ7H_V6_ket9qXMgOTHWcOosfj3HherqjJ3Q9T-IfT2Pvl618Cx8u-0qrfsMqajCKk0h4Y5mnMRcdwOdrc-dbnl_UkLslC4uBvbs-Rqs7kMrcXK2-JLZt-ZdV05zxWYdf1F-riqXN8IzGPHDt4eLG9TOCpUpq_Ljp2lmUJcCAxWpHR1ppG-sxjnN8oBK9Wsxk6JkFoGt37t4wzlpZwF2xuNoIUs4JIrWL0pSoyxKEthAEAQBAQfNd7waTazT37B731G7T6SpbUdNStkzoqbytS6fNFQhuO_ZzOc0dmN3p2qZS00KbttRTLhoF775p0bnHMsf2cnlbuPnCrzjRl-xPiiSKwJjnntN5kka5uiVn8ILQ-44bzna2P8AnHzLjupuYtP8EX2y8l5-o6np_ATX5pf-vm_Iw8h8j1rdduq6ozxIXn_C1j6rgDjjf1jO4KPkXJI3I_muqq_tXmyTnHN5Ql-K26Pa_JHR4ooooxHExscbdjWNAaAOwBdnGCiqJURykpOTq3Vmlq2haVq0Biu12yZGGyYAkb2tfvCrZeDayI0uRr27fBk-NmXbLrB093qORcwaLe5a1kMjkcAD4tOy3YS3Ozd8obivnfMMK5hX6J9sX6bTucLLhl2atdkkdV5V10a1o0Vw4E4zHYaNwkbv9IIK77lWd-5sKf8Adqff6aTi-Y4f7e84bNa7jDz1_CeofUb_AHjVFzz-JPuXvRJyf-VDv8mVD2Tf8jf_AHLf1lzvSn-yf_iveb3qT_XDvOlSRxyMLJGh7HbHNcAQR2grt5RUlR6UcjGTTqjjfPml09N5hkhqNEcMjGy-E3cwuyCAOgbMr5tz3FhZyXGGhNJ03He8myJ3bCc9LTpXedX5fsS2dD0-eXJlkrxOeTvJLBk-feu_wLjnYhJ63Fe44rNgoXpxWpSfvKtW_iJv-5P662j-00kf9niXhVjZBAYL_wDkbH7p_wCqV7HWYz-1lV5T_wCUP7p3vhT3dRRxvuLiq5sAgCAIAgKRqMr9V1rgiOWucIoj1NB9b3yrMVwxNbcfHPQWu7p0U-mOpMGAGARdhb6vvKBSo6l6dtONCs8s3XVdRNeTusn7jgeh49X4lNcVUU8efDKm8uSrmwOGcyTPucyag_OS-y9jc9TXcDfcAXyvmM3cyZvfNr20R9GwIKGPBfpXxO3Va0dWrDWiGI4WNjYB1NGAvqFq2oQUVqiqHzy5cc5OT1t1MqkMAgKZ7U6ccuhQ2cfaV5wA76MgIcPSGrmuqLKljqW2Mvf6I3_Tt1q847JR93oyN9ktl3iajVJ7pEcrR1EFzT6chUek7jrch3P3lzqW3ohLvRaOev4T1D6jf7xq3vPP4k-5e9Gm5P8Ayod_kzmHKvNEnL9ieZlcWDOwMILi3GDnoBXDcr5m8STko8XEt9DsOY8vWTFJvhoWKT2tXSwiPT42v6HOkc4egBvvrcy6rnTRBV7zVR6ahXTN-ohdN0bXebNWdbmDhHK7Ni45uGNaNnCzrIGwALWY2HkcwvcctTemWzw-Bsb-VZwrXCta1R2-J2GCCOCCOCIcMUTWsY3qa0YAX0a3BQiorUlQ4Oc3KTk9bKVW_iJv-5P66uP7TVx_2eJeFWNkEBgv_wCRsfun_qlex1mM_tZVeU_-UP7p3vhT3dRRxvuLiq5sAgCAICO1-99002RzTiSX7OPyu3nzBZwjVkN-fDEptG9LSsCeINMgBA4hkDPnCsSVTXwm4uqJL_tmqdUX5p-NYfiRN-5kRdi1JNZdZOGSPdxng2Di6wpEqKhDKVXUvemXW3KMVges4YeOpw2FVZKjNnbnxRqcZ5qrSUuZtQZjhIndKzySHxG7-xy-V80tu1lTX6q-vSj6Ry64rmPB_pp6tB2mhciuUoLcRzHPG2Rv5Qyvpti8rkIzWqSqfPr1p25uL1p0M6lIwgKT7VL8cWj16eftbE3Hj6EYOf0nBcx1TfUbMYbZS9i9EdD07ZbuueyK9rNL2S1HcOoXCO6THCw9oy53vtVXpSzonPuXm_IsdSXfsh3v09pZuev4T1D6jf7xq3fPP4k-5e9Go5P_ACod_kyk-zGhQuX7rblaKy1kTS1szGvAPFvHECuY6ZsW7lyanFS0bVXadD1BenbhFwk46djobXtK5arVY6-pUK7IIf2NiOJoY0E7WO4WgDbtBPkU_UnLY21G7biox1Oip3P07CHkOfKbdubbetV9vp3lh9nmuDUtDbXkdmzRxE_rLMfZu9Ax5luOn8781jhf3Q0eGz4eBq-d4f4r3Evtnp8dpaFvjTFHr7OYm52f4oj9NWX9prY_7PEvCrGyCAwagQKFkncIn5_NK9jrMZ_ayq8pAnVHdkTs-kKe7qKOL9xcVXNgEAQBAU_me46zqIrR95sHdAHS92_4lYtqiqa_InWVNxZdOoR1aUUBaC5re-cA5cdp91QylVly3BRjQ2fCi-Y30BY1M6I0Nb05lrTpGMYPFZ348DblvR5ws4SoyK9b4okNyle4J303nuy9-P6wG30j3lJdjtK-LOjoR_tK5ZktRN1iozilgbwWmNG0xjaH_k9PZ5FxvUnLXcX5oLTH7u7f4e7uOy5DnqD_ABSeh6u_d4-mshuRueI9LZ-HaiT9yJJhmALjETvBA28J37FreSc7Vhfiu_Zse75F_m_KHef5Lf37Vv8AmdMqXqVyMSVZ452EZDo3B3vLuLV-FxVhJSXYchcsztukk0-0j9Z5r0TSYnOs2GvmA7teMh8hPkG7ylU8zmtjHVZS07lpfp3lrF5devv6Y6N71HKNRv6rzTroc2MummIjrwN2hjB0Z7N7iuAyL93Pv6F9T0Jbl6a2drYs2sOzpehaW979NR13l7RotH0mCjGeJzBxSyfOkdtcfi7F9D5fhrGsq2tmvte04fNynfuub8O4jed7tN_K-oRsnjdIWtAYHtLsiRvRlUud3oPFmlJVpv7UW-UWprJg2nTu7GVL2WWIIdQvGaRsYMTQC9wbnvdq5_pe5GNyfE0vpXvN31FCUoRoq6Tol-nU1XTJ6rnNkgssLONpDgD0OGOlrhldjkWYZFpwemMl6eo5WzdlZuKS0Sizk_LGoTct80eFb7kfGatwdABOOLzEA56l8_5ZkSwsuk9Crwy-Pn3HbcwsLLxqx1_dH4HX4rlSZ3BFPHI7GeFjmuOPICvosb0JOiaficLK1KKq00VHmGnLT1M2WZDJXeJG8dDxtPu7Vctuqoay_BxlUn9M5gpW42iR7YbG5zHHAJ-iTvUUoNFq3fUu8kHWK7G8T5WNb1lwAWNCVyRX-YNfrvrvqVHeIX7JJR6oHUD05UtuG1lS_fTVEffKVF8cUlt4x4vcj-qN585Xl2Ww9xYUVSwqIthAEB4_j4HcGOPB4c7s9GUDK_p_LViLUGWrUrJA1xeQM5L94O0Dp2qaVzRRFSGO1KrLCoS2EAQFdl5ZtN1E2qksbGh_iRtdnIO_GwblMripRlR474qosXRt84UJbObe0DQuVqT_AB2SPq35wXtrQsD2O2-sQS0M29R8y4nn-DiWnxJuNyWxKqfup6aDreS5mTcVGlKC2t6fn6aSgrkjpia5f0HTtTkDbWrQUjnbG8O4yOwu4GbfrLacvwbV9_XdjDsev20XtNfm5lyyvptyn6eL9h1Tl3QND0iLg0_hkmeMyWC4PkcPKNw7Au95dgWMdUt6Xv1tnF52bevutzQt2wmVsigc0tey3V5rU0zbdcNke54B484cSfmriLvS96U2-KOl9vwOut9Q2oxS4ZaF2fExf_KNZ_1lf9P-io_-Vv8A-Ufb8DP_AKO1_jL2fEvnLGkzaTodbT5ntklg4-J7M8J45HPGMgHc5dZyzElj2I25OrjXV2ts5rmGSr96VxKidPckQHOHIU-s6k29Tmihe5gbYbJxd5zdjXDhB6NnmWo5vyGWTd_JBqLppqbTlnOVYt8E03p0UPnk_kbUNE1Y3bFiGWMxOj4Y-LOXEHpA6k5RyO5i3uOUotUpoqOZ83t5FrgimnWukuFqrBahdDOwPjd0HoPWF06dDnZRUlRldtcnv4ias4LTubLkEedoPvKZXd5Uli7mazeUtTJ2viaOviPwNXv5UYftZEjR5SrxvD7UnjEbfDaOFvn6SsJXdxNDFS1k-1oaA1ow0bABuAURaCAIAgCAIAgCAIAgCA17On0bUkUtmvHNJASYXPaHcJdvxnyKG5j25tOUU3HVXYS2784JqLaT1mK9omkXozHbpxStxgEtAcPI4YcPMVHfwrN1UnGL8DOzl3bbrGTRTtU9lNd7y_TLZhB_qZhxtHkeNvpBXOZXSsW62pU7Hp9pvsfqOSVLka9q-BO8mcqnQKkzZntltWHgySMzgNaMNaM4PSStpyblf7SDUmnOT2bthrua8x_czVFSMSwrcmqCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAc42b-hAVyDm2SV8UIq4nlEcfDxHAscbG2Izs3RNlDs9O3ZsQG1qPMLqN41XwcWDC_jDjsgk4_ElOz-r8M58oQHkvMLodMq6jLBivZMhOCctj4HyQndveGNGOtyAz6PrEmoOlDoREK7WMnPFnhs5cJotw2M4W7enKAxa7rs-nNsmCBsxp1X3Z_EeWZY3IDWYa7Lu6f5FAe6zrstCwytBVfamdE-csY2VxLWEDhb4bJO87PysAdKAyPvXv-wVqbGsFOSrJPJxZEgc17WjHR8tARFLnptnmkaIKzXQSyTwwXI3vIMlZvHI1wdGxu75rjhAYH8_TnXG0I6LDVOo_hZndNiXxGjL3-Fw-rt2HKAla_MNyfmu3osdNpr02RyTXPEwQJWFwHBjbl2zegI2jz2-1qVSl91Y02b9uk4iTJa2q0OD8Y-VncgLJql8UabrHB4jg-ONjCeEF8sjY2cTsHhHE8ZONgQGG5qFupVg8SKN1yxM2CNge4RBziTkvLc4DW59XfsQGs7Xp_wAP8Ztdv3kWxRfFxnw_EMvhcQfw5LdufVygPNL163atxwWKzIWzG0xjmSF546UwhkyCxmxzslvYO1ATSAIAgCAIAgCAIAgCA126fRbI2RteMSMkfMxwaMiSQEPeD1uDjkoD6mpU53ufNCyR7o3QOc4AkxPxxM-qcbQgPZKlWSFkEkTHQsLCyMgcIMZDmYH0S0YQHyaFEwzwGCMw2S51iPhHDIXjDi4dOelAaetaDX1ZrY7Bb4XC6OTMbHPLH44g17hlucfyIBQG5aoUrfB95gZN4eSwvaDjO_GevG1Afb6teSeKw-Nrp4Q4RSEd5oeMOAPbjagNWPQtFjv_AIhHRgZeLnPNlsbRJxPHC48QGckHagNLU-UtKu6lU1FsbK9ytZZZkmjY0PlMYIDXu34QErHSqR2pbccLG2Zw1s0wADnhmxocenCA1maBojLxvsoQNul5kNlsbRIXkEF3EBnJyUBsmlTMc0RgjMVgl07C0Fry4YcXA7DkDpQHz-HUPun3M12Grv8ABLQW5zxZweni2oD1tGk2COBsDGwROD4ow0BrXNdxAgDpDtqA9jpVI3tfHCxr2GRzHAAEGZ3HIR9d20oDMgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgP__Z';
image = document.createElement('img');
image.src = 'data:image/png;base64,'+ blob ;

UPDATE 2

ahh! fixed it! now its working.

changed Base64.encodeBase64URLSafeString(rawLogo); to Base64.encodeBase64String(rawLogo);

Answer 1

I wouldn't be surprised if the problem is that the way the JSP renders item.logo on the page is messing it up. Since you have no use for the byte array in JavaScript, you can convert it in Java before printing it on the page. Also, this relieves the need for window.btoa, which isn't natively supported in IE before version 10.

Try creating a method in your class that returns the base64 encoded value of the logo property, called something like getLogo64...then in your JSP, you can reference it like: base64 = "#{item.logo64}"; and not even deal with the logo property. So an example is:

public String getLogo64() {
    return Base64.encodeBase64String(this.logo);
}

At the same time, you can add a basic method that accepts a byte[] and converts it (which is what you have found to work):

public String RenderLogo(byte[] rawLogo) {
    String base64String = Base64.encodeBase64String(rawLogo);
    return base64String;
}

and use it like #{testController.RenderLogo(item.logo)}.

Reference:

• encodeBase64String: http://commons.apache.org/proper/commons-codec/apidocs/org/apache/commons/codec/binary/Base64.html#encodeBase64String(byte%5B%5D)

Answer 2

If the resource you're loading has the appropriate protocol and CORS headers available, you could load it as a Blob, then add it to your document like this using the URL.createObjectURL(data) method to get the img src:

    function urlToDataBlob(file_url, callback){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', file_url, true);
        xhr.responseType = 'blob';
        xhr.onload = function(e) {
          console.log('urlToDataBlob: load: ', e);
          if (this.status == 200) {
            callback(this.response);
          }
        };
        xhr.send();
    }
    // eg: 
    urlToDataBlob('https://the.url/to.some.jpg', function(data){
        console.log('data: ', data);
        var _img = '<img src="'+ URL.createObjectURL(data) +'">';
        // add to your document.. 
    });

See : https://www.html5rocks.com/en/tutorials/file/xhr2/