从Rest API获取图像。 JQuery问题

两个相关的问题。从Rest API获取图像。 JQuery问题

(this is my jquery.js file) 

$.ajax 
    ({ 
    type: "GET", 
    url: "url", 
    dataType: 'image/png', 
    async: false, 

    beforeSend: function (xhr) { 
    xhr.withCredentials = true; 
    xhr.setRequestHeader("Authorization", "Bearer xxxx"); 
    }, 

    success: function (data) { 

    document.getElementById("myImage").src = data; // (will be in next question) 
    console.log(data); 
    } 

    });

当我JSON数据，就会将数据放到通过的console.log铬控制台（开发工具）。然而，用PNG我没有看到任何数据。这让我担心，因为在图片中的请求响应我看到了二进制数据

�Ս-��tKn�v���6�k�˟>��������7�&=���+���?J�k�����y����L���m�(ψ/

，但我需要确保这是在数据变量，因为的.src =数据线。

这导致我的下一个问题....如果图像二进制数据是在“数据”变量，不应该它显示在我的HTML？

<html> 
    <head> 
     <script src="//code.jquery.com/jquery-2.0.0.min.js"></script> 
     <script src="jquery.js"></script> 
    </head> 
    <body> 
     <img id="myImage" src="" /> 
    </body> 
</html>

谢谢！

来源

2014-06-27 k9b

为什么你需要ajax电话？刚刚成立

document.getElementById("myImage").src = url;

即使你通过Ajax调用获得图像的内容，让周围的所有浏览器的问题，编码问题等等，你不能只显示图像，监守“源”的属性一个img带一个URL而不是数据流。

在那旁边，你的代码看起来很好，如果我去JQuery.com并在控制台中运行这个（火狐 - 最新的），我会得到的数据流：

$.ajax 
    ({ 
    type: "GET", 
    url: "http://jquery.com/jquery-wp-content/themes/jquery.com/i/feature-sprites.png", 
    dataType: 'image/png', 
    async: false, 

    success: function (data) { 
     console.log(data); 
    } 

    });

您可能希望确保您的身份验证不失败，并且由于您可能在与API不同的域上运行脚本，因此应确保API允许CORS（跨源资源共享），这意味着您可以从不同的域调用它。

来源

2014-06-27 23:49:16 hnafar

我的印象是我需要ajax调用，因为它需要授权的链接（不记名令牌） – k9b

除非您可以将流保存到某处，然后将的URL设置为该位置，否则您将不会能够对数据做很多事情。由于这是一个获取请求，因此您可以选择通过URL参数以其他方式传递身份验证令牌。你的其他选择是让这个请求服务器端，在这种情况下，你将src属性设置为您的服务器上的终点，然后在那里您使用适当的授权标头向目标api发出请求，然后流回应给你的客户端 - 也就是说，如果你运行服务器端代码。 – hnafar

感谢评论hnafar，这是有道理的。我关心的是来自请求的二进制数据响应不被存储在“数据”变量中，对吗？或者它实际上是存储在那里，它只是没有打印与console.log – k9b

从Rest API获取图像。 JQuery问题

回答

相关问题