-2

I have basically made an api in flask the return png image from the server and the intresting thing is that I am returning that image by writing on the bytes io.But the problem is the JavaScript is displaying it in charcters that only aliens can understand. Here it is

`�PNG

� ��� IHDR�������������͏|����>IDATx��X� �0�S�!cN�)9�9ͧ䄌� ����[Q�KiXKbk"(Q�E?D���ّ�2{�b>������?۩��S�g��9���U%=�Q�KbDE�笻� ĕ���#§�JG�T'���E�����S�J��c׺3v;B���N�hShݺy������n՚�Q�~�}в#����D�s$b���%�A��������\�=G(������[L ���&�@��#�p���5��6�N����O89̣�����pr�0nD���U������.�6�ÿ��;��Z���2��g"�ʷ©���PP|� &����G�k��-�~ti]sAʿ���ؑ��߲/������G�����IEND�B� script.js:39:13 Please anyone help me.

zvone
  • 18,045
  • 3
  • 49
  • 77
Tazim Rahbar
  • 53
  • 1
  • 5
  • 1
    You are displaying the binary data for the image rather than the image itself. Make sure you are setting your response headers appropriately. Also, where is your code? – Mr. Polywhirl Jan 08 '21 at 16:39
  • Would this help you at all? https://stackoverflow.com/questions/21227078/convert-base64-to-image-in-javascript-jquery – Noah Calland Jan 08 '21 at 16:39
  • Show the javascript code which you use to display the image. The question should inlcude a [mcve]. BTW, the question is not related to python or flask at all (there is no python code in the question at all), so I removed those tags. – zvone Jan 08 '21 at 16:51

2 Answers2

1

It is what happens if you try to console.logthe image's binary data. If your javascript is running in browser what you'd want to use is something like

<img src="data:image/png,[binary data you received]">

in order to show the image in your web page

Léon Stefani
  • 46
  • 4
1

Since there is no code we can't know exactly what you're doing but I'm guessing that you didn't receive the data in the correct format, you shoud make sure that you base64 encode the binary data in the back-end when sending it to front, and then just do something like this with the encoded binary data:

<img src="data:image/png;base64,' + (here goes the binary data variable) + '">'

Next time please provide more context, and also if you can try to avoid storing the image directly into the database, you should store it in the file system and then store the path to the image in the database.

DenisDaniel707
  • 79
  • 2