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

Question

我无法解决我提出的 AJAX 请求问题（顺便说一下，我是 AJAX 新手）。我有一个 API 设置，我想使用授权标头检索 png 图像，该标头使用我提供的令牌（存储在本地存储中）。因此，例如，如果我要使用 Auth 标头访问图像，那么我会这样做......

$.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·{þçùÌ

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

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

This is the response I receive

Answer 1

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

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

Answer 2

似乎您正在获取二进制数据格式的图像文件，而不是您期望放入 img 标记 src 属性的 base64 格式。

如果你有图片 url 可以直接放到 img src 中，不需要 ajax 调用。