javascript - AJAX - 请求响应后 img 标签中出现奇怪的字符

Question

我无法解决我发出的 AJAX 请求的问题(顺便说一句，我是 AJAX 新手)。我有一个 API 设置，我想使用授权 header 检索 png 图像，该 header 使用我提供的 token (存储在本地存储中)。例如，如果我要使用 Auth header 访问图像，那么我会这样做...

$.ajaxSetup({headers: {"Authorization" : localStorage.token}});

我能够检索图像。我可以在 Chrome 的“网络”选项卡中看到它，但是当我使用下面的方法将其附加到我的 div 时...

$.ajax({
    //Use commas for several parameters
    type: 'GET',
    url: *url of image*,
    contentType: 'image/png',
    success: function (data) {
    binary = data;
    $("#image").attr("src", 'data:image/png;base64,'+ data);
}

...它以这种奇怪的字符格式出现(如下所示):

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

我希望它以图像或 b64 字符串的形式返回，我可以将其简单地放入 src 参数中。我在网上到处搜索，似乎找不到答案。

有什么想法吗？我非常感谢您的宝贵时间。

This is the response I receive

Answer 1

您的代码正在下载二进制格式的图像。

您需要将二进制文件编码为 Base64 才能以 Base64 形式显示图像。按照此答案中的说明使用 btoa:https://stackoverflow.com/a/247261/2223027