I'm currently grappling with an issue related to an AJAX request I am working on (I am quite new to the world of AJAX). I have set up an API and my goal is to fetch a PNG image using an Authorization header that requires a token supplied by me (which is stored in local storage). For instance, if I wanted to access the image with the Auth header, I would execute this code...
$.ajaxSetup({headers: {"Authorization" : localStorage.token}});
I can successfully retrieve the image. It shows up in the "Network" tab in Chrome, but when I try to display it on my div using the following code snippet...
$.ajax({
//Utilize commas for multiple parameters
type: 'GET',
url: *image URL*,
contentType: 'image/png',
success: function (data) {
binary = data;
$("#image").attr("src", 'data:image/png;base64,'+ data);
}
...it appears in a strange character format (as shown below):
div id="image" src="data:image/png;base64, PNG
IHDRww^ÀþIDATxÚìÝ|ÔWº?þ½¿ÿ½Ý.ÅâÉd2îdâ®BB ÁÝÝ )îÞbÅÝ¥TÐzi)Ô ÞRÙn»rï]»+w·{þçùÌ<Ãd]ùýV¾çõz¿H&I°Ï÷ç<çï}OÊø;æO1ªzhÔÀdÆþKȤ!......." etc
I am looking to receive it back as either an image or a base64 string which I can directly insert into the src parameter. Despite extensive online research, I have not been able to find a solution yet.
Any insights or suggestions are highly appreciated.