Отображение изображения из двоичного потока - Angular 10

У меня проблема с отображением изображения в браузере при получении этого изображения из конечной точки REST. Я выполняю GET для конечной точки и получаю двоичное представление изображения. Я не могу отобразить это изображение в браузере.

Я прочитал все сообщения о переполнении стека, которые смог найти по этой теме, и прочитал с десяток других статей. Я пытался реализовать различные рекомендации и комбинации рекомендаций, но мне не удалось отобразить это изображение в браузере. Важно отметить, что если я использую Postman для вызова этой конечной точки REST, изображение в Postman отображается нормально.

Я постараюсь кратко изложить более подробную информацию.

Вот фрагмент кода из конечной точки REST. Это даст вам представление о том, с чем я работаю ...

final StreamingOutput fileStream = output -> {
     output.write(photo.getData());
     output.flush();
};

Вот пример вывода с этой конечной точки ...

����\u0000\u0010JFIF\u0000\u0001\u0001\u0000\u0000\u0001\u0000\u0001\u0000\u0000��\u0000�\u0000\t\u0006\u0007\u0013\u0013\u0012\u0015\u0013\u0012\u0012\u0015\u0015\u0015\u0016\u0015\u0017\u0015\u0016\u0015\u0015\u0015\u0017\u0015\u0016\u0015\u0015\u0016\u0015\u0016\u0018\u0015\u0015\u0015\u0015\u0018\u001d( \u0018\u001a%\u001d\u0015\u0015!1!%)+...\u0017\u001f383-7(-.+\u0001\n\n\n\u000e\r\u000e\u001a\u0010\u0010\u001a-%\u001f%--------------------------------------------------��\u0000\u0011\b\u0000�\u0001\u0013\u0003\u0001\u0011\u0000\u0002\u0011\u0001\u0003\u0011\u0001��\u0000\u001b\u0000\u0000\u0002\u0003\u0001\u0001\u0001\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0004\u0005\u0002\u0003\u0006\u0001\u0000\u0007��\u0000=\u0010\u0000\u0001\u0004\u0000\u0004\u0003\u0006\u0003\u0007\u0003\u0002\u0006\u0003\u0000\u0000\u0000\u0001\u0000\u0002\u0003\u0011\u0004\u0012!1\u0005AQ\u0013\"aq��\u00062�BR�����\u0014#�3r\u0007\u0015bs��\u0016$D��\u0000\u001b\u0001\u0000\u0003\u0001\u0001\u0001\u0001\u0001\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0001\u0002\u0003\u0004\u0000\u0005\u0006\u0007��\u00004\u0011\u0000\u0002\u0002\u0001\u0004\u0001\u0002\u0004\u0004\u0005\u0004\u0003\u0001\u0000\u0000\u0000\u0000\u0001\u0002\u0011\u0003\u0004\u0012!1A\u0005Q\u0013\"aq2���\u0014����#BR�\u0006C�\u0015��\u0000\f\u0003\u0001\u0000\u0002\u0011\u0003\u0011\u0000?\u0000\u000b-/52,�UB�!\u0013���4qC��4\u0014J9iEK��Dr*�\u000e\u001d\u0003\u0015T�cL4i�l4ǥ�\\��f̚[���ݦPdi\u001d~��K\u0016xO��e/pq\u0003^h�V|�%�e-��\u0005ˎ\t��ߕ���\u0011�s\u0017�a����Ӯ��׸\u0014���St6�S�x���Ԅ���ǂӾ�j�8��\u0010F>\u0000\u0000&��Vk�\u0019���\u001e׵č��,���:w�l6� ��\r��ǒ�^�2o�Hv\u0003��,}f\u0007Cc.�zh�\u0007�*U\b�Ь%�q\u000b��\u0003�\u000fÒ�lP��S��@ؼh\u0001\u0017\u0014 �\u0013�I�\rBɧ%\u001aH'pxl��R)\u0001���x32�P�����b88o�\u0002��`�B(k��c\n\r�s#\u0015�U�!X\u0004�W��\t�e�b��E1�L[ñg;�\f��X5\u000b��oN<\u001a\u001c�\u0017���A��Y\\�H*9Z\u0002Շ\u0013|��6�\u001cfQf�����_�G,\\]1�\"��\u001e�\u000b^�gq1�B���8���\u0016%\u0013ȜR\u0012 �����a \u0014hb�Ϋ�#�\u0003I�\u0012�\u001b}\u000f\bJ�X�\u000e�NFx�i�#\bX�\t����\u0007)\u001a�9�,Z�1��\u001e%�\u0015�\u0013��l�n�:�{N�j�K�Öx��}���~�6���T\u0016\u0006i\u0018\u0005�]d�&ڦ\bb��撲2��\u001d�\b�����\u0004~%Y�\u0019Ur�\u0000o�.�&G�\r�*�q���%\u001aȦ�\b�r��F9�k�$h�F�\u0004\u001dG��䔣[�x�Ur\u0014�0�ۤ�\u001c)�\u001a\u0000��^I>/�V\u0013��CgO�\u000b�g�ݲR�++��n�����X�G40�\u001b��\u0019L\u0002�!)7��\u0000P�pӅ\u0010ӯ�h΄h�aq\"�*�\"\u0010��Zt�\u0005.z6\u0014BS\\�r:\u0003)t�3v+\u0015�Xt��\u0015�J\u001b7*5i����\u0015�\u001a��]��y:�$�\u001a��\u001a�\n�\u0010ց�5]6�\u001c�y\u0015���t\u000fɚ�B�-4`�\u001e��&���B�0�!����ؖ�Zu�i�\u001cV���5�8\u0017���h\r ��\u0015��\u0017\f��0�\u0004\u0018�h�<X�\u00149ʛ��\u000b4�I��\u001b�Q�\u0018�j��Ő?T��0<xEM�j�-N�~ߊ�\u0019���\fq-4\\W�IG�\u001b]�u�A֎�d\u001f��r��h�Ó��>�\u001d�\u001cc�젗\u0002\t֭����r���M6/��\u0012J_O#��4�,�]k`�˙����K�\u0012v&��1�y�/!�\u001d.|����@=�n�\u000f$��#�\u0012Rm�a0��F�:\u0001���2�㣣\u0007&\u001b.=���\u0000]��?����K���=��yԓd�N�}��7'l��-��\u0001\u0000�\u0017��O��lyZj�b� S\u001a�h\u001bV��x%J��gl\u0019�\u0005T�`\u0018��+�l\u0018��71�^\u0017\u0002Jd:\rg\u000fTJ��T8ZO�V›\u0015!��V�cv��\u0014��E�p3�Q�\u0001\u0003\"�\u0015��\u0010��N�\u0004߀�#��W\u0017\u0005�U\u0002+�AZ)\u001cһe�~!<N˗3y\u0015\u0019�=�G���Q���Hc�\u0007\u001d\u001c9u�Y!��'�r��v�DѾ!.\rΉ��5o1[��\t���{\u0019�.y1n���K���Q��i�\"Lc\u0011\u0000�b��*�H��A\u0018.\u0016���9[˩�\u000b\u0006}d1���\f\u001b�\u001a�\f$8�\\@\u001e�\u0014!�,��%A\\�JN\u0012�/�vb\rSGwm�^�pǹ3��z3�\u0015<������Z�h�5խ�`}���EtoZ\f8�\u0000\n���\u0011���\u000bE��A-$\u0011�;(d��\u0000\r\u001e~�4��T�\u001dp\u001e\u001d�����\f��\u0006g�\u0003��=6�;�hśW,�)>���';d��_�֮i\u000f#���]\u0018�+i�\u00002<IW�i��\u000b31�<;N�n47'd�\u0014�T�`G\u001b�\u0014�\"\r�����{�^\u001b�m�\u0015��ƭ'�e��n5_\u000b�/�q�����\u0017@y\u0004��&�*����\u0018�\u0000�'�r1q\u0001ҽ�g) O�\u0000\u001aӾwK�_�1�\u0007\r�諏P��x��A�$剹/j����\u00131j>}���Ԏ'\u0014<�>\u0006@�*\u0012��c��'�%\":�B�B%PC�T�B��b(�a\r��\u0012\u0005�0\u001eK���X�Vu��\u000emFQ�Ydp%؅e�\u0000��\u0005�\u0010)sA\u0005��y\u0015��+�;\u0004x$Q^J�{�~8��t2��Mk�z�Y(�C�Po\u0011��l�\ri\"�#j:���L\u0013��\t��\u001a�\\�HQ&1��œK9\rJdq,'\n��N[7��\u0017���\u0005�1~��F�\u000e\u0016.�_��\u0001`�\u0016����b��\u0011\u0013l���ޞ'�mǎ�5���˃;�Y<���r\u0017�������R�!��t����tn���Y\f����Q���vD��\n\u001f��'�4y��,��ǰȹ!P��n\u0018���.GQ�\u001a� <����7]\u001a�j\u00148���3x_�'��\u0000fx�(P\u0015@6�\u0011\\�\u0011j���=�\u0012�2-�1�K\u0015 ��=��Ü��9\u001b????�l�]\u000e�n\u0018�j���'��\u0000�(5�=�>��#�|�0����BQ6|�\f�\u0015�E7\u0001%�q�x{N���|\u0013���������J���c������\u0000r���3‥j�62\u0005#U�\\��v\u0012JZ���\u001eॵ�%,h�aTFΌ:\u0004�DQ&LR��I��yi+`\u0017b��BlV\u0000��\u0006؍�\u0012\u0014-��\u001926\u0014�n�%e\u0013%Hm*������$f�o>�_\ne��4x\u001f�Z#hx�\u0001GN�-�/\u001c�Ķr���\u000bfi&���O,q�t�J�\u0003t\u0003^g���u\u001a���G���l�7�Y�?u(E.��H��\u001fy�\u0017rhּ��Xf�~d:����vgn�\u0018AAR\u000b\b�\f��\t�\u001aE0\f \n�!�}\u0004�:D�[E�=��\u0000��� �/��\r������p��MQ\u001e?��.�Qo��G�k��|�����\b\u0004\u0003Uty����\u0019\u0013H�<>��cm;R\u0013\u00168\u001a�2�\u0005kg]z�W�|D�G������\u0000�\u001eb4��]\u0017�(�_��-�7\fa���Hz��Z�q�����8��\u00168��4;��[\u000eK�?\u0007羻��\u0019~$z����R�\t�\u00100�ʊ\\������\u0005b1�IEhE\u00071N�p�\u0007�&�9\u0013h�h�}\u0000�:�p,�J�+\u0004�#��\u0006T�+ �\u0014�D�ք6���\u001d��:d\\�9}ӥ�\u0006�K������QX�r�ma2�u��W�,�=+2�\u000b$��\u0001�ԯ?6<�^�t/,\u000b\u0015������-\u001aNs�A�T�U�4�����z��c�(��~\u0006;�Ti.�cx�A�l*(�Э\u0017�+�Z&�Ҥ\u0006H�6�u!�\u001f3���VJ��7�\u0003�8��Ō �:n�f��1�)sˍ���X�\u0014�^�}D�\u0019̿\u001e`�G2A����-�y\\\u0011�\u001f�%=\u0016?���TXK�hr-�e��7v�m�\u0006��2_1S��6@u\u001a���A�4FW�4\\6P{�G��f�����m#ςP]���9���V�t��\u0002\u001bB�نU�T�e���И�\u0019��\u001a8g\f�Eh%�%�h�\tZ8��IȬ\u0012v.\u0011��\u0012؍\u0014�&R\u0005\u0016F�Π���\u0019 �\u0010��\u0011|R�e���c~��\\\u0019�^�\u001f�>��\u001a\r�(�m1�q2�A\u0005\n�}��r\u0011�I\u001c8���F;�Z\r�\u0019\u001cK�]١B��I��T�憈��;;{&��6\u001c�9���f�\u0000�߄j���b�\u000b#dM\u0011\u001bm^m˴��뢆_�)��AﲼmD��b~.�_}\u0000\u001e��\u0000k^���\u001f�Q�C��l\u0018�\u0003kK��?e�Y�N\u0016+��\u0012tLOkO�DH\u0010\u001a2E��\u0002�c\f\u001e04�iJpo�sN\u001b~fj0�e\u0016�\u000fT�߇��ߪ�s�7�\u001c��\u001e>���S4y\b CA<x\u001d\u0001��:e\u0010�;)VO��0�X@�\u001a\u001c��h�� \u0002�0)X�\u0014NmI��\u001b�J-\u0002�\u0012[\u0005\u0016D�w\rA152c$\u0015�4\u0012v\b�e!\u000bfO�>&]�lt4��)\u001aڤ(\u001f\u000f���\"���\u0014\u000eM�0�� #�=R(d\u0002S����NL\fo�b��lu�j\u0002X{J\r���\u0018�\u0016���0�]��h<����'�}Y�\u0014R[�g�n\fi$�5'��p\b��*�\u0002Ș5���o�~+4��9xg�\u0017��7\"q��(�\"�P.7z�}\u0016�IEQ���\u0014qcX��T\u0000p�]v���ۋQY5]�\u001b\u0011\u0007a\u0007Uہ,qH\u0006f����E\\{d�<mf�&8���d���q���\u0010K�|n�U�$��0�\u0017��ٚ�+��\u0010�&(�U$&\rL���}?�>��\u001bf)����7�\u000b̞9c{e�?�6�\u00169/������\u0000G�m3T�1!n+db�B�\rU�0^\u001f�\u0013�\u001aW\u0000��#8�\u0001J��\u001aR4+D\u001e\u0012�-\u00149�6�GZ\u0017m\tc\u0013$\u0014-㯓!���Z1Q�\u001bI\u0019�\u0016$e ��ʦTq�\u001aj���k�r�Q�M;�U\u0004�1ڜ��>\u001c:��#c\\$*M���\u0018а\u0016�wb�p���K�F���\u001c�UqA]��c���>%�3������ӗ/eV���goj�\t8�<\u0000I�l�ϥ�\r�i5�!�m�`������`�\u001dH�3s�Y櫮��]�q/��z4�\u0016'\u001b�4�t\u0016MV8��#?.+O\u0013^���jQ��۠q:v\u0007\"�)��\u0002r��n֊V\r͢��O-�F�!�\u0014d�\u0006\u001c9�;)sX�\\Z2�Gt�������g����k��<O��\u0007��of���� �G��x�\u0012�|U�Y�#y\u001e�v\u000eo6�,�S�1�'\u001b�'ٰ��K\u001bea��\u0007\u0003�\u001f\u0010�i�\u0016�&\u0001�+��aT�Z�\u0010�\u0018Ns\u001aE\u0012V)c�Ju�\u0011�x\t>�+B�1%8�V.�`���h\u000ffGh@��\"�4u)⨮7Ɍ�飿����\u0010cd5�E�J0�\u00132��\u0010\u000b)$�\u001d��f��lg��A�\u0018�\u000f\n[\u0011��12\u0005���\u000b*��}\u0006��\u0011����o��^|:~^�D���4/��~Y���FP)\r��V�,�\t~#\r�'��a�,�͚�9~\u0016�\u001c���#�ZQ�T�ErK�)\u0010ɖ�.�C\u0004��͖�\u001a���P?���{��2T(�'A\r}�M!EU>\u0002�>�z���ћ>�\u001eeR\u001aq�S18^�fr6�\u0000fa�i\u001fa�jӱ�\u0016�5R>cU�N��|�V9��\u0005t=?e�MIpx�1N\u000e��O�\u0012�\u0000N���w��m��\u001bΆ�\u0000�<�o�e�`޷G�T}\u000b\u0016\u0017�\u0013�\u00127U�\f#\f\"{\u0016�q�+`-\u000fI`�\u000eD�8\u001c���<�\u001cE��Ʉ��7��c��?UU\u0006�@��>\u001e�����*�6k�\u000f�Qi�����?��\\����p�\u0002r�ރoR��E\"����TE�\u0004�i�P�\f�\u001aj���k��$84�ʻd\u0002�ڄ�+c|6\u0015g���aÐ��\u0011��0���[(v&x�E�]ۣ!�_y��z\u001eI�~Gn\u000f���c_;\u001a�\u001cD��h\t�n����<��RWH�9B�!Xׂ�\u001f\u001a\u001eCA�����\t�W*�\u0013b�Md�@%NV�\n�a�\u001a\b�84K���>c�`,��?e�z^���O�1fY��~�\u00009ʩ\u0010���\u001c\t͑�a�h�\u0007G�\u0000u�My\u0002,\u001f5�]�52�(�K�\u001fي�H��\u001f�V�C\u001c�\n���L_#\\\f�V�]�d�'lf�\u001d�>\\�x\u0015�\u001f�^+�G8-v�hz*C<��1j4����0�_�ɇ~W����=|\u0017��Q\u001c��ϒ�h���>�O��m�\f�X�\u0012\u001b�1�?~=��\u001b{,��[^��1\r�\u001a��̿\f��F�\u0011�#\u0016˳��,�t�u�a�s�5�Ǡ\u0016�E��\n�o\u000f\u0001v�W6?\u000b��a�W��O�:\u001d&X\u0019\u0014Nd� 9�-\u0016m���q}-i�Q\\\u0015��\u0017\u0013�[C�I\u0004\u0007Q�.]Jg3�\n8��\u0019�����__�NYN�n3�2#��A��[\u0019+03�\u001c�=ُx�K'c�\n�@\u0000Ih�f�\t\u0015�����\u000b\n��\b�8h\u0012��\u0011F�����\u000b� \u0015L�>\u0018\u0001��{�\n\u001eeS\u001cj�|\u001c7!\u000e\"u�\u0012�`\u0019���\u001f��+\u0000�\u000f�IV\u001a\fd\bm:�\u000f�@��\\ٚ4=������=\u0002\u0015G�z&��/�(ĽV'�7g\"���\r\u0010l\u001f\u0010�Q���M?#k�b\u0019���\u001ah�v�xk�\nYU\":\u001c��\u001c����Rh���c\u0004�\u0001V9�Q�\u001an���+\\(��H�7�Lk��\u0012r��ܨ5\\\u0005�j±\u0018X�c��\u0002ߡ�GB�\u0014�9�te�a�\\mIZg��d�<N[�F�k��Nބ4_C\t,�����N\u0007�#��\u0000\u0011�h�\"F5�g4\u001f+Y6ӣ3.�ȸ�\u0019�\u0003�r��ǣA'�\"��B���\u000fN\u001d]��\u0000\u0016�t�\u001d<��\u0015\t1�\u001c+\r\u0013�B�\u000fS�f�\u0000�ܫ,0�|�X�b��\u0019�45�\u0006�Z\u0000\u0003MI\u0003�}�\u0014Q�7��%7�.�`m^��,�Q��\u001ce�$�ӧ!�\u0002���\u0017Ɍ�_�$��Y����Y\u001b��E7�қ��7\u001c�\"fFI� m<\"��\t#%��^ZG5V�(j`��?�~9�????rC�\u001f�S��f�\u0007\n���8�E1Yx�U2l����(\u0006&JN��\u000e).X��n�\u001f��N�*4V�s=4�h�\u0012�1+:��P��Q\u001ba�(4vii+\u000e�G\u0013c^��\u0000Zw\u0005NEqJP��_'�x�\u000b0H[�\\-��q������m6�g��>EN\n�\u001e�\u0007:H��+^\b\u0005��_N\fɮ��k�ŞK\u0016X�N���\nv���x\u0015\u0016�c\u001c�\u0018�\u0000�?U6���C^\u001f8\"�N�My��V����J!-�l6�����\fn �`u�\u0014�\u0014�cI�\u0010�[���f|�ox}���\u0016�\u0006g��.�#�}?��\u0013\u001f�^=׷�{�N\u0015�\u0000��۵�evXk���s\u000f�z\u001c��NX�v|����l?��H�G<�F�i���\u0005zڢ�\u0004&�\u0012x�b�\u00065�$��\u0006Z\u0002�y���(��Ax�����4\u0000ߘ\u001c�K �\u0019\\�N'WP5]ytR�C���\u0012�\\w�\u0014^S���if �\u0019>5M�'E'6��\u001f`�\u0011�f�7�\u0000\"?$�خC�/\u0006�?�1}]�>�\r�؍���H�8_�ff�ଇ�f*.\u0003'mt\u0003nѧe��l`\u0000\u0007D�$��\f+͔�c�4jv#\u0018��Ɉ˩Q1YD���Y�m��k�R<����Ko#�@hWj�y�����\r\tC\f#\u0014�\u0000�\u000b\nJ\u00181\u0010\u0014��VR�ezW\u0013�\u0001�<-��Xt;���r*t�/�<�Or������\t�<�FӇ��\u0007�Z\"ϣ�H��>\u0019g\u0007��/�ZH\"�\u0006��A�+ԧ2�0����yƸk1\u0011I�����t���ƌ�>�\u000f��W6�i�2�X���`�'��r\u0012��PT\\,��q�\f c/���F�f��U���ؙ�\u000e^ͯ�]-�7\\���s��\\�r��ͪ�\u001c8�Wo����\u000f���$�K+G��\u0000����f��6V�ZLx��;��\\�Vؽ��_����\u0014\u0019�\u000246\u000e��\u0017�RS�y�[���Ρgs`����t�/\u0007P�\u0015ċ�\u000bГ����S\u001c�x�֓].�� ��X\u001bK�^�\u000f3�����l�\u0000�����3��'�\u0001�#�5�I$�Њ�я��F���\u0006�6�h��#A��dh�*t��C@�5\u001c\u0003,ɐ��\u0012\u0013XM\u000e\u000e\u0015���li\u0004IP�68ӡY�\u0002�\u0016�1/TGP��9���\u000b�����e �2\\C\u0018\t�jϩ$�\u0000W�\u001d�&�b ���z���x%lF7�E{\u0002|��\u0002C\u0016�.�hz\"�B\t\u001d@SJ�dR�Z\u0014:\t�\u0014�\u000b\"�5���h�\u000fm�=Aݧ��h�mT�>:g�8�\u0004�\u000e㙦���G%��g��S\f��W˜�\u0013�xewt�ו�v�k����Z\u000fɇX���~�y�\u0012����t�p.e9���z�4,�,�Z��\u001c�!-nJ5?�!�5�l,k�5kNmN�\n\u0003̟D�D>,�2lo�>\u0019��H,�>K��9������z�j{#\u0013���%W�?\u0012�\u0012��f\u0003(?h\u000b�\u000eut�ϒv�8�7��bM����,�\u0010�n><���\u0005A���\u0015���Y\u001aCM\u001a6A�\u000b>i��\u0013�����>6�3\u001f���\u001b,��Y\u0017�L5�\u001c����\t\u0015�!�kdVLr]��\u0019\u0012��'H%nŢ\u0012��]h�\u000e�����\u0012\u0015��\u0006.\bn\r��e`�,ٖ�Qh>\u0017(U\u001c\u0019\u001b\u001d���=ʴ0�]!J�Ok\u001b�G����w=\u0007]�Ҵ�J��9!4�W\fZ���\\\rP�7CG�F�칬0��\u001a��\b8�Aw�Z\u0001�\u0006g\u0013[\u0002\\u�\t!�Ƥ�\f�>���5ז6\u000b��\u001a��\u0000j\u000e���\u00195�k�;�$�\u0010�?�Oj����\u0001kC\u001bWuVH�D\f�]/�v79c��ѫ\u0014!��lk���\u0019\u001a�no!��\u0000��5�\u001eK�US섻쵲5��n\u000e�CGW�N��<o�$��(\u0005���\u001f J��I�[`�\u0013��W��~X��,��kz���z���\u001fТ�cZ�G�����\u001c\r���ܘS'p�-8�\u0018�:��\u0011���\u001d���lg\u0010�F\u000b\u001e��-jX��\u0010ܝ�B�/�r�I<��Il-�e�-��A�j�\u001aH��I��=\u0004.ö3��\b܀u<�y������\u000f\u001b�C�I�uު�~{$s:���qĒ\u000f��O;�)���b��\u0013��<��0���s�F�#[�/\u000b��)�jƄw:\u0010�,C���\u000006�q��ro�,Qݏ���\u000f�1ݲ�U�\\\u000e�\u0011֩8Upx�$�ּ/\u0019�#dD����X�\u0015�\u0004�Qe\u001a��1V�P�D<�|Q쵀���XC#I,�$Z��\u0014J��ΰ'7Tw�͟\u0011�� \u001a�d>\u001a}\u0016�\u001c;vY6�0�\u0011:��\u0011'�#O�w�ˎ\u001c��xߐn!�Ƽ\u0017=�\u0000��H&��\u001a,ٵ��\u0000�\u0004��&v ������Q��d�7�;9�;\u001d\u001f\u0003���/�&�ss\u000eW]w�Ь�|�#D��н�G���qv�C^\u0005-������\u0000P��\u0003�\r��Ӫ��G\u0018*�a��\u000b��\n+�\u0000�\u001cG2KG���x\u0014�e�m/�U�.��\u0018�\u0017\b�67��klr �I4��K�7���h/��Re����u\u0019�]�\u000f\"<\nx���q\u0018 4;V�[4Q��,��Ѻ#5G�.�G�\u0000\u0013�/?&����\n��\b�M6,�47���,Yt����Co~Kd!��ui�m~�K\u001c�):�[��v\u001f鵂� 4k��ií�\tZ�F\u0017+쳉qW?5X�\u0006�:�|���\u0000�'��_��\u0000\u0000���Y,�_ nS`\u000e��\u0011GQ��K7�B.���\u0006㇁����}\u0005{\u0005�z�F�����P8C��������f-f,���\r�g\fûb����N>\u0018j����\u000b�\u0018\u0012F@\u000e�ė\u0016}�\u000fC�\f�\u0006\\r�\\{��\u001bY,/�\u0014��\b9�p\u0000�q繣�9N��K��a�]H���\u001b�\u000b\u0014l\u001e��Lßn�<\u0003��v�4�5\u001d|BǓ\u0006��F9†2F���-���3��\u00192��ы��0�nhd��\u0012�k\n�%U��\tlk����\u001a�g\u0014\u0018�Mb��:\u001b�\u0016��?��\u0007�Y�'UG��zx�F+�7�����Ts��\u000emC��(�\u001d\u0003�=\u0001&�\u00144�`�]��)�П��\u0011��u�z>J��S��%�\u0004r&�\"�u\u0000�\u0000<\u0012G-vv���#�O�~��\u0012-\u001d�\u0004a�.лk�9r;��I�g$.�|K+�\u001b@�5���kQ�\u001bt�|sJS�\u0005�\u001a��ks\u000ex���u��\u001a!����!�\r�7��\u0014kCZ\u0013{R�$�f\u001df�0[�=��_\u001a�x�\u0019���Ϙ\u000f���!'\u0016�^�X��b�x��_��F�5�c�T�SU\"��f�Xat`��s\u0016�\u0003��y��w\u0007-�X ��TRvf�v-�ҽ����\u0018Ѣ?�k\u0000�s�Rm>\u0006�|O�3�ZƁZ�#s��u�.�\u0004��Bm@�q�\u001d\b#�i��/6�o]\b�E�\u0016�����,�\tx@��7{>�\u0000�\u001b+���mh��R�v�9\u0010v7��%�\u0010@嘸�\u0000���Y%\u001f �ˡ$\n�\u000f��+,��,*m\u0010\u0019`\u000f~\\�,N\u0001Ѹ]�]�\u001b��-�=l�=�_�Ԣ�}�<K�\\쀆��\u000e�:Y��U��+>!м9�ch��_��~\u0003ř�f�\u001e\u0007x~af�\b�42t\u000b&\\6!Ʋ��<n/��{\u0002���$�Sl\r�2$�!-sQ��\u001e�\u0014�{�\\�\u0002�\u001a����>6��ѳ����!oÅ8�n����x7@�\u0000�\u0000Nn�\u0000ϩ��-.\u0019��\u0017>YUl��qPF;����w��z]:���\u0000����E�8�r ��qv�7�o� lT�ka�\u0012u�>�\u0000a�\u001f\"|d]��\u0002�\u0011`\u001dj���7����/�\u0019��ۋZ@\"Àԃ���������Ƿ�A�\u0000cl��v�����[��\u001e{!$�1��\u0001���@\bl�\u0002�@�\"��+n)��z:\\�\u0005\u0017��G�\u000b\u001c\u000f.cꩱ1�'\u0017����m�V�g,��>�x{D29�ݒ�;\u0002F�kJ¢��y�x1\u000f��1����_D��i\u0000?\u0012\u0005�:�s��Qy\u0004\u00048�\t\u0001ץ_29_�G�\u0005.��\u0012}N��\u0012���0p4�\u0002\r\u001d�\u001a�}킆l�0m5k��t\u001d�\r\u0000��9;d[#�2u��p�ݳ�^��.�4��\u0011\u0014jr��q\r6\u0007 =�h�|�w�Z��|E�\f`�\u001f��s\u001f������Xc+��6KЭ�\fO\t��\u0007��H#��A�!Z>���\u001bn)��{~a��,�\"�)†�e�\u0013\u0010�%,3��C�q�\u0004�!\"ET�=�\u0006:.b[\t`bV�w�R8�ˆ��wK\u001b\fr�'!�\u0006�y\\�:Y�#��Qc\u001c�\u001by��uM�\u0012�E\u0017бV�~\u001dô\u0012�3[ή;���䫟&9Mc�{{�7�\u001a��C\b��_=��:\fPjqdl\\�\f\u0003ͽ��m\f�\u001bf.��<M�\u0019\\s�W��(+E�&\u0019����w\u0005f&3\u0014�����A�A�|RaY\u001c�D<[Nѕ�\u001f�����ud{C�ڲ�@�{�YB{yj����J��\u0015��8�!`�X\u001a�\u001c�:BX4%�wgN���\\t#�'|�&�|F�\u0002������C.Oq\f�&r㹥�d���'\r�O�\u0012.�a�S�g]!�\u0017���#���y�u�|AP�~��\u0016�Ph��n�<�}�D�rJ8���ʉ�\u0005\u0015�g�T���)�u���Z��&Y�#�\u000b\u0018č�\u001b���\u0000)պ\u001e1�G��\u001ah-���[5W\u00018\f8{i�\u0010y\u0015�\u0014\u001ffK\u0011q��Z�3��Ɠ�~��GS(*|���?�|?\u0003\"\u0011\u0018���0\u0006ʗ�rv�rl#��8 %��\u0018]�_�S{b�6�%�HĢ��9 �\rP�0��\u0014\u0014hdX’\\\u0014Aq\u0004�!,j\f\u0005��(�0�\u0005�����\t�K���M,oH�6SiKp��Nhv�P\u000e�b�\u001c\u0014\u001d�w]\u0013��h\u0002L���\u0014��T���<\u001a\u0005SO�\u001ci3�S!ŻW48\n{;�x�Ԃ9��hé�,�\u000e+�t\u0015>\u0006�\u0007\u001c��ҳ0҉\u0015��/YWc��\u0017�8�V\u0018�Q9\u0006�\u0001�ʗ\u0001H��N6�<8;K�Gm:)��\u0019�N*�<��%fy������\u0000в��J�9�\u001c\u000f\u0007h#��\u0013�l?U\u0007��\u0016�m�\u0012�l�`0��)k��\f�.��5丒/��\"��/>�t\u000b��0�{�)e��\u0005l\u0016���D5o�j)a��\u0000\u0006\"`�����o�\u0000'�\u0018��\u001f����]\u001c\u0013�s_�9I�Ȃ��A\u0007\u0004�\u0000�J_�?a�I\u0015:\u0017t>�\u0005\t?\fZax*m���Qb�_&�x�cl\u001al.wZՇ\u0007�d�.F�8����\u0014�\u001d�\u0012��c#�L��0C\\�\u0019\u001cy�\u0000y\u0002\u0014qM���y�l\t �8\u000e�LEE�k\nc�8�O�KG\u000bیi;R0�\u0018�0�\u0001☒[��ϒ\u0019ujn�,��\b��ed��,��\u0007�/��W\u001c�\u0003j��\u0016�>\te�ȿ���卍�M��]E�rŦ����\u0006-��^�\u001d\u001a4\u001e\u001e����Ri�|}B�Cư�����/�@:l@5��<^�����T\u001f�9&\u001aR쵩4\u0000\"�:/BS���OE)\u001b���cz�_D\\�ag|2\u0000��\u0011v:lU#\u0018jq�(?�\u001a�\u001b\u0011�@\u0007�=\u0002�q�q�^Ĕ]��|X��B����hz�ˊ\u0019� f�\u0019j����s{��\\\u0018\u0017;��\u001fu�\u000e�Y\u001e�����'�q�\n\u0001o�\u0018�\u001am�G����A\\�%=;�3�a\\]JS�\tci���0\u0014\\,x�\u001b����ݥT�(���t�\u001ah�\u0014�`�$�H�\u0017&JT3da^\u00110�d�u5V\\ \b昗R�r\\�Hd5³KV�*V�eΕ,�\u0005\u0013d��0�yW���TH\u00043�@.��%\u0010���f�GD��\u001a\t,�v��� 

Я использую Angular 10 на стороне клиента. Я возвращаюсь к закодированному мною уровню NodeJS, и уровень Node вызывает рассматриваемую конечную точку REST. Я пытался:

  • Отправка потока непосредственно в тег изображения HTML,
  • Добавление тега типа мультимедиа к потоку и отправка в тег мультимедиа вместе с потоком в браузер, например data: image / jpeg; Base64, + двоичные данные, а также данные: image / jpeg, + двоичные данные,
  • Я использовал atob () и отправил этот результат вместе с типом мультимедиа в браузер,
  • Я заключил локальную переменную изображения в DOMSanitizer () следующим образом ..._ 3_data: image / jpg, $ {binaryData} ) и this.domSanitizer.bypassSecurityTrustResourceUrl(data: image / jpg; Base64, $ {binaryData} ),
  • Я перепробовал все, что читал, и сижу без сна, не в силах понять, почему что-то, казалось бы, такое простое, поражает меня в таком недоумении.

Вот тег HTML, который я использую ...

<div>
    <p>Here is the user image</p>
    <img [src]="imageName">
</div>

Что еще я могу предоставить? Мальчик, любая помощь будет оценена по достоинству.

***** ОБНОВИТЬ

На самом деле, все сводится к следующему ... Как преобразовать массив байтов во что-то, что можно отобразить в браузере как изображение. Я думаю, что преобразование этого в Base64 - это лучший способ. Я пробовал поиграть с буфером NodeJS и еще не взломал его.

**** ОБНОВЛЕНИЕ (добавление кода)

Вот еще два компонента кода. Как уже упоминалось, на самом деле это не проблема браузера на стороне клиента, Angular. На самом деле это просто проблема с преобразованием данных. Как принять ответ байтового массива на вызов отдыха и превратить его во что-то, что может отображать браузер. Я предполагаю, что данные следует преобразовать в представление Base64. Я попробовал несколько подходов к ведению этого разговора, но безуспешно. И снова я недоумеваю, почему это кажется таким трудным. Я должен упустить что-то легкое.

Два сегмента кода, которые я включаю, относятся к моему узловому уровню. Уровень моего узла состоит, по большому счету, из двух типов компонентов: маршрутизаторов и API. Маршрутизаторы обрабатывают вызовы rest с уровня angular и передают эти вызовы компонентам api, которые направляют вызов на серверную часть Java моего партнера.

Вот компоненты кода. В закомментированном коде вы можете увидеть различные вещи, которые я пытался правильно преобразовать.

Вот роутер ...

//Route to get user photo
router.get('/:userId/photo', validateAuthorization, (req, res) => {
try {

        logger.logIt(configSettings.logFileName, 'In userRoutes - In userRoutes - Get User Photo - ' + req.params.userId);
        var emWebResponse = new EMWebResponse();

        (async () => {  
            try {
                var response = await userApi.getPhoto(req.params.userId);
            
                emWebResponse.statusCode = response.statusCode;
                emWebResponse.statusMessage = response.statusMesssage;

                var bufferString = new Buffer.from(response.body).toString()
                //console.log("HERE IS THE RAW DATA - ", response.body);
                //console.log("HERE IS THE BUFF RESULTS - ", new Buffer.from(response.body).toString());
                console.log("btoa - ", btoa(bufferString));
                console.log("atob - ", atob(bufferString));

                emWebResponse.body = response.body;  
                //buffer = new Buffer();
                //buffer(userPhotoResponse.body).toString('ascii');
                //userModel.image = btoa(userPhotoResponse.body);
                //var byteArray = Buffer.from(response.body, 'hex');
                res.send(emWebResponse); 
            } catch (error) {
                logger.logIt(configSettings.logFileName, '*****Inner Error***** - In userRoutes - Get User Photo - ' + error);
                emWebResponse.statusCode = error.statusCode;
                emWebResponse.statusMessage = error.statusMessage;
                emWebResponse.body = '';
                res.send(emWebResponse);
            }
        })();  
    }
    catch (error) { 
        logger.logIt(configSettings.logFileName, '*****Outer ERROR***** - In userRoutes - Get User Photo - ' + error); 
        return (error);            
    }
});

Вот api ...

    module.exports.getPhoto = function (userId) {  

    logger.logIt(configSettings.logFileName, 'In userApi - Get Photo - ' + userId);

    try {

        var bearerValue = 'Bearer ' + userSecurityToken.access_token;

        const options = {
            hostname: 'localhost',
            protocol: 'http:',
            port: '8888',
            path: configSettings.baseUrl + '/users/' + userId + '/photo',
            method: 'GET',
            headers: {
                'Authorization': bearerValue,
                'Cache-Control':'no-cache'
            }
        };

        return got(options);

    } catch (error) {
        logger.logIt(configSettings.logFileName, '*****ERROR***** In userApi - Get Photo - ' + error);
    }
}

***** ОБНОВЛЕНИЕ - 8 июля 2020 г. - Новые сегменты кода в соответствии с рекомендациями Hanan и Myerffoeg.

Сегмент API с заголовком reponseType ...

GetUserPhotoObservable(userId: string): Observable<EMWebResponse> {

    this.logService.log(LogLevel.debug, "In userAPI - Get User Photo - " + userId);

    let httpOptions = new HttpHeaders()
        .set('Content-Type', "application/json")
        .set('Cache-Control', "no-cache")
        .set('responseType', 'blob' as 'json');

    let httpParams = new HttpParams()
        .set('Authorization', "Bearer " + this.securityTokenModel.access_token)

    try {

      return this.http.get<EMWebResponse>(this.configFileModel.baseUrl + "/users/" + userId + "/photo", 
              {headers: httpOptions, 
              params: httpParams});
    }
    catch (e) {
      this.logService.log(LogLevel.error, "In userAPI, Get User Photo - Error Occurred - " + e);
    }
  }

Код менеджера с использованием FileReader

private GetUserPhotoComplete(emWebResponse) {

    var userImage = new Blob([emWebResponse.body], {type: "image/jpeg"});
    console.log("THIS IS THE BLOB - ", userImage);
    var fileReader = new FileReader();

    fileReader.onload = (e) => {
      var b64 = fileReader.result;
      console.log("FILEREADER.ONLOAD, This is what we got - ", b64);
    } 

    console.log("ABOUT TO LOAD");
    fileReader.readAsDataURL(userImage);
}

person tgibbons    schedule 07.07.2020    source источник
comment
Какой у вас HTTP-вызов (код) из Angular для получения этого изображения?   -  person Myerffoeg    schedule 07.07.2020
comment
Привет, спасибо за проявленный интерес и извините за задержку. Я предоставляю два фрагмента кода. Оба этих фрагмента находятся на моей стороне узла. Я понял, что это вообще не проблема Angular и не на стороне клиента (браузера). Это действительно проблема преобразования данных. Как упоминалось выше, у меня есть клиентский уровень, использующий Angular 10, и серверный компонент, использующий Node. Моя серверная часть состоит, по большому счету, из двух типов компонентов: маршрутизаторов и API. Маршрутизаторы получают запрос от Angular и передают его компонентам api, которые вызывают нижестоящий уровень Java моих партнеров.   -  person tgibbons    schedule 08.07.2020
comment
Вы исправили проблему? У меня та же проблема, и мне нужна помощь   -  person Ragesh Pikalmunde    schedule 28.09.2020


Ответы (2)


Это решение предназначено для кодирования base64. При использовании URL-адресов Base64 вы должны дезинфицировать его при назначении image.src следующим образом

<img [src]="snaitizar.bypassSecurityTrustUrl(imageData)">

если вам нужно решение только для двоичного кода, тогда вам нужно сначала преобразовать ur двоичную строку в base64 с помощью btao, а затем использовать верхнее решение, подобное этому

<img [src]="snaitizar.bypassSecurityTrustUrl(btoa(imageData))">

введите описание изображения здесь

введите описание изображения здесь

person hanan    schedule 07.07.2020
comment
Спасибо за ответ. У меня два вопроса: 1) Красная полоса предназначена для того, чтобы что-то заблокировать или выделить, потому что я ничего не вижу в красном. 2) Какой тип данных возвращает конечная точка? Помните, моя конечная точка возвращает двоичный файл, а не Base64. Вы показываете мне что-то новое. Я попробую эти вещи. - person tgibbons; 07.07.2020
comment
1- Я прячу любой ключ безопасности за красной линией. 2- json с некоторыми из них, у которых есть строка base64. Я обновил свой ответ, пожалуйста, проверьте и задайте дополнительные вопросы, я улучшу его. - person hanan; 07.07.2020
comment
Круто - Большое спасибо за вашу помощь. Эти методы не помогли. Собственно, все сводится к следующему - я получаю байтовый массив. Мне нужно преобразовать это в Base64 или что-то, что будет отображаться в браузере как изображение. Опять же, меня крайне озадачивает, почему это проблема. Я сейчас играю с буфером в Node. Пока не повезло. - person tgibbons; 08.07.2020
comment
Я не знал, что вы возрождает байтовый массив, чтобы это решение работало над байтовой строкой, и вы можете преобразовать байтовый массив ur в байтовую строку, что вы используете на бэкэнде ur? можно просто преобразовать двоичный массив в base64 str? - person hanan; 08.07.2020
comment
Я пробовал и, кажется, не могу преобразовать - это сбивает с толку. Я могу вытащить изображение через Postman, и оно выглядит нормально, но когда я извлекаю его из своего слоя Node и пытаюсь выполнить преобразование, я не могу получить результат Base64, который отображает изображение. Есть классный сайт, который конвертирует кодировку Base64 в изображение. Я использую этот веб-сайт для проверки своей конверсии, но ничего из того, что я пробовал, не работает. Это должно быть легко, правда? АХ! - person tgibbons; 08.07.2020
comment
на сервере преобразует текст в двоичный, а затем преобразует обратно в строку на клиенте. - person hanan; 08.07.2020
comment
Как сказал Ханан, отправьте двоичный файл изображения, а на стороне Angular используйте responseType Blob responseType = 'blob' as 'json', чтобы получить его как Blob, затем используйте FileReader API с readAsDataURL, чтобы получить URL-адрес данных base64. Если у вас возникнут проблемы, я опубликую ответ по этому поводу. - person Myerffoeg; 08.07.2020
comment
К сожалению, это не сработало. Я скопировал новый код выше. Однако я нашел кое-что интересное. Я нашел веб-сайт: base64.softbaba.com/string-to -byte-array-online.php # готово. Если я использую свое исходное изображение Base64 и декодирую его на этом сайте, он будет в точности похож на массив байтов, который я пытаюсь преобразовать. Затем я копирую этот результат, вставляю его в первое поле ввода и кодирую. Я получаю тот же результат, что и мой код, он не соответствует исходным данным Base64 и не является отображаемым изображением. Добавляет ли декодирование некоторые данные, которые необходимо удалить? - person tgibbons; 09.07.2020
comment
Попробуйте использовать FileReader API с readAsDataURL, чтобы получить URL-адрес данных base64, использование btoa просто дает вам строку в кодировке b64, но вам нужен URL-адрес данных. - person Myerffoeg; 09.07.2020
comment
@Myerffoeg - я не уверен, что понимаю. Сегменты кода, которые я скопировал выше в разделе ***** ОБНОВЛЕНИЕ - 8 июля 2020 г., показывают в моем классе диспетчера, что я использую fileReader.readAsDataURL (userImage), причем userImage - это новый Blob, который я создал из данных, возвращенных вызовом Rest. . Это то, что, как я думал, вы порекомендовали в своем первом ответе. Вы видите что-то не так в этом последнем сегменте кода? Единственное, в чем я не уверен, - это параметр типа при создании Blob. Я собираюсь немного почитать об этом. Я ДЕЙСТВИТЕЛЬНО ценю вашу постоянную помощь. - person tgibbons; 09.07.2020

Чтобы получить dataUrl, вы должны сначала получить свой Blob с помощью HttpClient Angular. Но здесь вы получаете Blob, который может быть чем угодно, но вы не хотите, чтобы URL-адрес данных отображал его в теге img, поэтому вам нужно преобразовать его, и для этого мы будем использовать FileReader API (с RxJS, поскольку readAsDataURL является асинхронным, и мы хотим, чтобы он был обернут вокруг Observables).

// RxJS way to convert a Blob to a string (data url) since readAsDataURL is async
readAsDataURL(blob: Blob): Observable<string> {
  return new Observable((obs: Observer<string>) => {
   const reader: FileReader = new FileReader();

   reader.onerror = err => obs.error(err);
   reader.onabort = err => obs.error(err);
   reader.onload = () => obs.next(reader.result as string);
   reader.onloadend = () => obs.complete();

   return reader.readAsDataURL(blob);
 });
}

Тогда вы можете получить результат как таковой в Component:

this.httpClient.get(`${url}`, {
  headers: {},
  responseType: 'blob' as 'json'
}).pipe(
  mergeMap((blob: Blob) => this.readAsDataURL(blob))
).subscribe((dataUrl: string) => {
  this.dataUrl = dataUrl;
});

Наконец, вы можете отобразить это так:

<img [src]="dataUrl" alt="My amazing b64 dataUrl image."/>

Вот пример StackBlitz.

person Myerffoeg    schedule 10.07.2020