Question

我无法解决我正在制作的AJAX请求的问题（顺便说一句，我是AJAX的新手）。我有一个API设置，我想使用Authorization标头检索一个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）Ô特龙»RI]»+ W·{þçùÌ＆LT; AD]ùýV¾çõz¿H＆安培;我°Ï÷℃下CI} OEO;！æO1ªzhÔÀdÆþKÈ¤......。”   等

我希望它作为图像或b64字符串返回，我可以简单地将其放入src参数中。我到处搜索，似乎无法找到答案。

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

This is the response I receive

Answer 1

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

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

Answer 2

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

如果你有图片网址，你可以直接把它放在img src中，不需要ajax调用。

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

2 个答案: