1

I have a React front end application. I am calling an API which is giving me a response of a file image in raw data format, like given below -

     �PNG


    IHDR\ ���HiCCPICC ProfileH��WXS��[RIh�H ��"H�B�  U��@B�1!�ؑE�."`CWE] 
    v�eQ��aAee],�Py������w�o��s���̽w�j�T����+ɓŅ�Ʀ��HOt�6�Z<�\ʎ��P����w7�5��.J������  
    �r>H,��9?�}��|�,�7�[O͓*�x�
    |�|����Kѥ�R|)1ee    e3��r��A��Q����ju.��ZO=E�G}���e��5FK�5G�Bk��Y��Zi�4'�6���-�m��ݦ����v�
    ˍ����V�V�VEV���[S���3�WZ�Xw�X،��aSgsǖb�m+�]m{�����]��|�{lw�+٫�׋����v�ۖ�؞�r���/. 
     �`�a�G�g>%z�;�3�s��/�_#�������d<�V�����V�)0.���8�9O%��l�B�?a�YP%��Ûr��9�n8� 7�+��   
    Auw�g����h��C�������|���������&{�cS��K���`C�]7J3?ȿǀ6�nf�     
    pHYs%%IR$��iTXtXML:com.adobe.xmp<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="XMP Core 
    5.4.0">
    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""
            xmlns:exif="http://ns.adobe.com/exif/1.0/">
         <exif:PixelXDimension>1628</exif:PixelXDimension>
         <exif:PixelYDimension>1056</exif:PixelYDimension>
      </rdf:Description>
    </rdf:RDF>
    </x:xmpmeta>
    �܏�iDOT(��{V6O@IDATx|���I������4F\ڒf$������ޞ��Х����=��pv�*O���鞑9s}�X������.��b�2g    
 N�X�
    �ylC�Pwx'�Ko�����X�e��&�ViP��T�r����G1  �����V��W�

My requirement is to show the file in HTML using as simple as

What have I tried -

  1. Converted the raw data to base64 and made that the source of the Result - Did not work, since converting it to base64 using btoa itself failed since it has unicode characters.

  2. Tried encoding the URI and then base64'ing it based on some solutions on StackOverflow Result - Did not work. No error, but the image is not getting rendered.

In short I am trying to set base64 as the src - "data:image/png;base64,"+btoa(raw data) and this is clearly not working.

Any working solution or pointer?

Bijoy valappil
  • 139
  • 2
  • 12
  • 1
    Have you looked at [this](https://stackoverflow.com/questions/7650587/using-javascript-to-display-a-blob)? How is the data received? (XMLHttpRequest, fetch, axios) – Paul-Louis Mas Oct 25 '20 at 21:45
  • @Paul-LouisMas I receive it by using axios to make the REST api call – Bijoy valappil Oct 26 '20 at 05:24
  • Then I think that you can have a look at [this](https://github.com/axios/axios/issues/513#issuecomment-292892990), it seems to be the same issue that you have. – Paul-Louis Mas Oct 26 '20 at 15:43

0 Answers0