ipa-apk.cn dbl.html,javascript - retrieving pictures stored as blob in the database and display it i...

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;

blob = "#{item.logo}";

base64 = btoa(blob);

image = document.createElement('img');

image.src = 'data:image/png;base64,'+ base64 ;

$('#testDiv').append(image);

the above code just gives me a broken link pictures.

sample blob from inspect element

blob = "[B@2d8f2913";

and the image inside the div

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;

base64= '#{testController.RenderLogo(item.logo)}';

image = document.createElement('img');

image.src = 'data:image/png;base64,'+ base64;

$('#testDiv').append(image);

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