In my LDAP Rest API I fetch the thumbnail like this using LDAPts npm package:
photo = memberData.thumbnailPhoto;
It’s displayed in the JSON response like this:
“photo”: “����u0000u0010JFIFu0000u0001u0001u0001u0000
u0000
u0000u0000��u0000Cu0000u0006u0004u0005u0006u0005u0004u0006u0006u0005u0006u0007u0007u0006bnu0010nnttnu0014u000eu000ffu0010u0017u0014u0018u0018u0017u0014u0016u0016u001au001d%u001fu001au001b#u001cu0016u0016 , #&’))u0019u001f-0-(0%()(��u0000Cu0001u0007u0007u0007nbnu0013nnu0013(u001au0016u001a((((((((((((((((((((((((((((((((((((((((((((((((((��u0000u0011bu0000�u0000�u0003u0001″u0000u0002u0011u0001u0003u0011u0001��u0000u001fu0000u0000u0001u0005u0001u0001u0001u0001u0001u0001u0000u0000u0000u0000u0000u0000u0000u0000u0001u0002u0003u0004u0005u0006u0007btnu000b��u0000�u0010u0000u0002u0001u0003u0003u0002u0004u0003u0005u0005u0004u0004u0000u0000u0001}u0001u0002u0003u0000u0004u0011u0005u0012!1Au0006u0013Qau0007″qu00142���b#B��u0015R��$3br�tnu0016u0017u0018u0019u001a%&'()456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz���������������������������������������������������������������������������u0000u001fu0001u0000u0003u0001u0001u0001u0001u0001u0001u0001u0001u0001u0000u0000u0000u0000u0000u0000u0001u0002u0003u0004u0005u0006u0007btnu000b��u0000�u0011u0000u0002u0001u0002u0004u0004u0003u0004u0007u0005u0004u0004u0000u0001u0002wu0000u0001u0002u0003u0011u0004u0005!1u0006u0012AQu0007aqu0013″2�bu0014B����t#3R�u0015br�nu0016$4�%�u0017u0018u0019u001a&'()56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��������������������������������������������������������������������������u0000fu0003u0001u0000u0002u0011u0003u0011u0000?u0000�2�S:T�3Q���u0006�u0007��)u000f����u0003�Eu0018�u0014u0000�;u000e��8″�8l�b��u0000’���Q�ڔ���I�Ft�u0004���L9u0003�u0000�Jkfu001c��u0006�Ou001cQߎ���=��f1@f#�#��u00198?�u0014�vu001dhu000b냎hu0001���u0000,�1�Hðu0014�u000e���@t��Ma�w#�v:�u001d)u0000����u0001�p3Q�u0004����2�ddu001e٠b量���u0007u001cpiu001b���u0000���ɢ��t�u001fJ(u0003a����?-=��p==�u0000�u0007��)�u0007h�/_u000eu000e0ix u0011Hu0000=:�R�u0018�u0003u0018�<~4p~�駜�u0000u000ex�t�sJ9�=h�u0006;�Zu0000i��u0000″���ݨn^�ib��u0000�Pu0002�^�� u0000���u0006;P8u0018�u0006}z�u0014�g���xt<��2��u0001�F1�M�@#����;u000e��gu001d1@bޣu001e��u0003�1�Na���I�B:�u0004{}1қ��S��4����u00010h�a����r�u0003?�F�F;�@2��u001d��/u001d}�u0002u0012�o^pi����ju000eq�Ju0006GL��u0001��x�}iz��Ju0018u��4�<s@n[����2:Ҟz� 搩ۓ��u0000’˻��1�K���H@u001c�u0019�Nu0019�@r#�u001f�u0007��R�cu001d�R�ju0000j���������k�uu0007�b���{Q�l}3�}���6��=�u0000F�u001d��?^�+�a�zu0000���zSq�ϭ9�u001eԞ��u0000Fē��u0000����I’~��Jg;��u0000&�r�p6�G�Eu0000mu001c�St犑�u001cc�Q��u0000��u0004��i�s�M#�p9u001c~u0014u0000u0013�zj��O~��;z��(�;u�u00067֗�1�u0014�s�u0002�1u0019�Q@u0000=yu0007<�z�f�҃�u0000�u0014u0003�x�3@bs��u0000u000e�9<Q����qO^zc8�(u0001���ӊi_�i�B��u00035G�F�R��X�u0011��u0015pv~Tu0001h�u���݃���u0010,8�u001dn���ۻu001d=��ֹ=c�{uu0000҆�,lڍ� �wu000f�#�4u0001��Gnx�a�vל�����&�T��tcu001a��u0011�u0013����=+�ou0014��n�,�P�6Ju001cu0000u000eu000e}?u001fCۚu0000�bI�fna<��ڨE�A>Ln�u0001]�W8�����nu0007u0004cu001e��u0000�89��5u001a��֞�0’�Ftu001c�u0001E �Q@u001bu0004��u0014��ZF�’��gn{}u0005u0000″�u001c�u00147u0003�”�{JF�hu0001W�^i7r:qK�9�M=y��u0002�H��Jh>�u0002i��:�s֛�_�Eu0000�e�&�OS��u�Tf};u0000u000f�;���Ҁu0001�AH�#F-�u0003’�E�/u0013]4P�cu000b���tu0018��(u0003’X��kY���W\u0002����3�u���$r9xNu0002��g���J��9��Bu0003��=N=y�?P�^u0017x���IJ2��u001c��u0014u0001�=��Q/%�4}���u0000�u001d<�u0006�x�3�&Wa������S5)@�ma��u0007��q���u0000�����<�t�Ügu0019�u001c�@u001bz|�ȥept<u0010{~u0015�i�Kn~�fu0000��t��XAjnu001dF~��u001e[�u0000�u001e�Λu001a<�u0003wu001e���u0014u0001�x?X�-���n0K�Ġ8u00000�V�zv��I�5#s4q�u0014��u001bIu001b��@�Au0004u001c׀�3Z̸b��$g���W�x#Xu001a��eou000eŎ�b$u001cu0012�J���tu0018��ր=Ep~��f��z�u0019�I���u0001��QQ�9��6�Zcf��qM2c�8��u000f�u0000(<�ӏ-��[�u0003��4u000169㱦��E4H3��R�|��(u0001y�RA���)�����}�(u0001�� ��u0000�O\u001f��Su0015�u000f�u0002���Mu0000Lu000exu0004ך���d�eWR����u0006Ku001cwu001d�~Y�KB3��u�{��u001d���五̒Eu001bu0012bm���i88u0019��u000fu0019�u001a�nu0003�u0003�I���L�f8��u0000�Hu0002<u001c��5�Y[&B�6r�u001bxu0018m�/��7v��J�b�u001e�u001f�u0000p�I��Hu001c����<u000eF}�u001f���~�u0010u0000<���u001c�ꂩ�[�
�u0014�)u0004Ŕ�[�u0002�3ZěwB�Y����u0000J�u001bG�u0015u0000�S�2+Qu0013>��jhTn �u0007u001bxLSu0015�u0005��gu001d?u001a�u000f�u0006�ݥ�H��u0018���u0006༯�q���~�&�f��#�u0004w��uu001fu000b<ˍpEu0010�@�R[#�b�H��u�u000fb u001fƛ�QҤ�8��&o�u0018�u00038����v(�ru00064nu0014�u001aB}hu0001I��ҀGA�i�7�>�u0001 4��ݟz7Pu0003��R��Qg&���u0000K���Sս2rE�)u0001�u0000��f��)Ru0001f0Au0015Qu001fӥXG�Pu0007�ǭ[i�����������B���u0005bu0018��u000e��:�u0015��x��syu001aT�[#2ʃu001e�u00069�ű������u0019Wy7��p;u0007 d�9B}u000b�u0000�q��i�/�[x �axS�u000fo�hu0002���$��bL<g�����=Gu0003��q�u001bW��I$���Gj�u000e�-��u0016��V9u001c�UR[�L�u0007l���բ��DB�*�u0018觧_Zu0000Ђ��w}�B��u0000;u001e,�u0000Z����Ef��f�.K���9�u000e>��blw>&i���¶�S�h��Hm–c&u000e1�}zPu0004Sj0^�4��nu0000u000en���~���u001bX�5"�g"<�
�k�m(�ceu0002u0003u0013�?�bu0006x�����u0017��X���x�6�n�’��u0000�~Mu0000zY�u001f�4�rqJ��u0000Ja<�rs@u0006s�u0000ꢓ8�(�ru0002zRg���p���u0004��>ا�u00038�u0006q@u0019�l�ߵf0{Pu0003YnO�)�����Ҁu000fL�c�&q�u0000֣4u0001″���”u001c�u0015�T�GA�u0000�n�IF������t�~lrl�n�.Q��T�u001c�z��Bn�m���u0013��u001eF{��}u0006~��%�n�1u0000$+��={���yt�f����(�u0005}�Xgyu0003$�u0000�u00002�K�;)�u0019d�d@#u001du0015u0010�u0000d�N2}�@1Xזr4L���B:u0010k����Z��:BWu0000�u001d�r:��k��hu001e��U|ݻwd��u001dzz�Zu0000�u0002ܾu0015V)�8�dz�9’�;+Y��u001b��u0018�4�r9��>�t��v�����1,��nԵ�ޤc�V�q�=�u0000Zu0000n�Ti�/�U���u000fֺυ�����H�2�u001cu0001��b����5�c����2Z”�B7�6� u001f_^����h�tu001a]�V���u001au000f��,{��@u0016u001b89�M �ǭJW����m�?��b�4S�u0000u001fҊu0000��u0004g�4gu000e��u0000�i~�$��zPu0005A�du0002$��u0006�4�3�S鑊���J��(u0003,i�:u0014ϦiN�'�~|�u0000*�ۏCA�u0000<�u0006!�eݍˎ��u0000���M��u0005��rnu001c��u�~�u0001���7e����'�l�9u0000s�osϭf>S�u001c�u0006u0000����JQg0�#QO~��d9��ր9�SN���Ebw}����W�j�,7w9��|g*�۟��?J��g�_ָ�u0017�u0015�PL2@u001f�:������@u001ef$�@��א�3*Ϝ���u0007�u0006u001b�q�s�����&{g�u000bu000b8�i]�e2(V$�u0000m�3��=:]rY��-�%u000e9��^VY0@�nu0012�q�~��*f��n8U�V��u0004a�u0005�ߠ�u0000u001aX�a��u0014��zu�@u001d�ü�������u0000z�-���[�u001e�u001a��u0016""?��u0000�u0015�mu001a��:�Tu0001�zdu000f˽#u000ek;�&�����su001c�T�p�u0000�t��u0000u001e�u0000/���p��u00105u0012מd���u0003I�u0015��Gu0003=�u0011�u0000��3Ey�_u0012g�u0013�u0000u0012��fu0013��@u001e�u001f?�N���ʣ��?u001a�u001a���u0001u00162@9u001e�b8���F��j$��u0007�Mu0000Wh��ӽ#F���yu001cffz�yy��u0000g2c�Svu0011�+M��=H㊌�Ϡ���u0005u0012��Ozu0019I�u0000�^h@�Gu0007��u0018��9��nju0000R}u0005*�u0006zf�u0015o��'�i�#�u0018u001dMu0000@u0014wu001f�r�;B��Lu001d����q�u0006�y�"�2ru001bu0005W�9$�f�9$u000e�Mp:��6�{ql�u0012�[�u000eʧ2K�u0004��s�܂x�u0014u0001��V�krȹu0007��rq�Zm|8u001f�^�tu000bu000b�qWu0017��"��P9�u0005u0000eH6��UWlu001fj��ߵDÞnu0000�<u0003���ɚ�7����9ْu000e�w���=q���$��u00015���u0013u0003�H�2�u001cu001cu0011����g�cDwu0013Bu+��u0000e��Tu0001��v�~�k���&"I]����n9u001f�#���]�f/�u0004����{w�G<wu0000��cGA�V���5��:O��Θu0007�u001dO\g�##5oT:����Ku00141�ޗ �!e1�R>Rs�u0019y�u0002@�u000bPu0007�ǫh�I���Iu0018��3.?u0001�y���ټG+��N�c�Z�u000b����Q�u001c(;�
u000fԞh�u000fC��z�:�i�u0016�u001e��u001ca5)��u��u0004g�Z�<W�;ɋ��u001c1_5/edϨo�m�Q��DMR�յKu0001�W>Trtu00199���[�u0002�On���u000fu0016h��er���4ҕb��N���u000e:u0001��t�tWY�Z���u0000�/e �lE���@�/�u001d����n�u0000��kj~#�n�e�&�y���m�� �D�#,9�zۺ���K�b-u0012�6�NT�u0000pz�{g���/��{�Ol�din�br+�b|���’�u000fTѵ(��”�P�u0012$u0013�uu0012(fu0006q�^U���Xu000e�u000b�}u0011u0006@[e�l��u0000��k�X�nI�|tu0014u0001u001e21��i�y�sڧe�=ru001bp�?Rhu0002r�?tf�&�L��Trs�3Q�u0016���3��”�}J���b�u0013�u0001�Wu001c.3���?0u000e��[��XF|�P~�u0003�٬)5Y��n�t��^u0010t��ϯJ�au0002H�]���T�݂FAV!�u000bb�X��+u00151d���u0015u0000�ǯ���(u0003��,�r}�]�”�07��Jf�ݗߓ��;Y�ZΫip�9�����s�u0005����]�)�u001b�ZW�mb����u001e�~���u0000N{ƞu001b�V�/��j����z�I�ލ�zu0003�’u001d�u0000aܑu0013�tj�u�e�;u0003Wu001e�uSo�C�[�8u0005�#���J��u001cu0013Y2�&�Cu000fJu0000��،c�TL0�<�ks왁�lmQ���Vf�b�Gyu0018�UW$�a@u00117?��ZK{yo&�`]��}u0007��u0000>�’���|3{tu0016k��,u001cu0010u0018��׀;u001e0s��+��4�Ku001bX���u0003u0000XL˗}����bs�q�pu00003��4��X�GUNu0002���s��I<w$u0003�S�;�Lu000ey�u00063��{U�#ipY��G\u001c.Fz����r��Hr�u0001u001c�=�u0002%va�[u001cgv��TR5���Z$����O?�Q@u0017�C��ë�64Ŕ��,}w�u001ea’�su0012u000f^u0007��[�,�&�s,�5��q)�mVP7���1���a�(�u000e�@i-缰id�;h�t�c�����}>A���?i�q�u001d +u0010u000e�n�u000e�$����QEu0000z��~Ou0007�Ϫ�5Ъ��~�Q@u000e�6�u0019��B}8��u0000�ˇ7�u0017u001b~��~ u001f�$W=t��q&>l���t��u0000��d:v�-ݸS;O”�q�e�O�c�QkrMcw�Au0004�o��y��2G�HC�A9$����h��+x����G���f<��ϩ���u001eu0015�>�!0L�,{�u0017w���Q@u001b�#��J�1�u0019�H�u0002�u0011�,���C�u0018���u000e���{(�R�Ifя��u0014��(��,ǣص�)u0007���Q�,9u0004�fH=1�u0002�u000br�u0004QƯu001f�B�u000b�q��9�vu0014Q@u0010]dIq�ٙS!���o���b��ٞ��C,N��,u0000?�=(��5u001a�u0005�,u000bmk���N@���u001c��qנ�f,�R�@�enu001c�I��7�}(��,u00187���,Y�!bu0019$����u0002�(�u000f��”
In my react code I tried to dump this thumbnail into the img like this:
{user.photo && (
<img
src={`data:image/jpeg;base64,${user.photo}`}
alt="User Photo"
style={{ maxWidth: "100%", height: "auto" }}
/>
)}
This just displayed an invalid image, I then read that I had to base64 encode it and tried different approaches without any luck:
const base64String = Buffer.from(binaryData).toString('base64');
and
const base64String = Buffer.from(memberData.thumbnailPhoto, "binary").toString("base64");
Any idea what I’m doing wrong here?