0

I am working on connecting to a flask API to get a figure/image in png format. It all works fine except when I console.log(data) i.e the response image (it is not possible to console log an image I suppose) it returns something like this:

IHDR��5���9tEXtSoftwareMatplotlib version3.5.1, https://matplotlib.org/�a� pHYsaa�?�id/IDATx���w|�����I�7]̶2A�����#8�����q�W=���s<�pTD@��٣Ȧ���{�q��ƦiڤM�d\��'�$��% �����$� """"����""""j]�DDDDN�������09@""""'�HDDD�d����� Upon some research I encountered something called the base64 encoding that is supported by the img tag. Do not know much of how it works, but i tried it still didnt get the image to display to the html. here is the ajax call to the flask api from javascript:

//figure image
  $.ajax({
        type: "GET",
        url: `/international/figure/${data_result["id"]}/png`,
        contentType: "image/png",
        success: function (data) {
          const graph = document.createElement("img");
          graph.src = `image/png;base64,${data}`;
          document.getElementById("imageContainer").appendChild(graph);
        },
      });
 <div id="imageContainer"></div>

Please what can I do in this case to display the image correctly?

dave
  • 158
  • 1
  • 12
  • 1
    For what you're doing ajax is overkill, simply ``graph.src = `/international/figure/${data_result["id"]}/png```. If you think you still need it check out https://stackoverflow.com/questions/17657184/using-jquerys-ajax-method-to-retrieve-images-as-a-blob – Musa Sep 26 '22 at 16:29
  • the output from console.log you posted, is that the very beginning? I ask because PNG magic bytes are not `IHDR`. That looks like the beginning of a chunk: https://www.w3.org/TR/PNG-Chunks.html – GrafiCode Sep 26 '22 at 16:46

0 Answers0