Javascript 从RESTAPI获取图像。JQuery问题_Javascript_Jquery_Html

Javascript 从RESTAPI获取图像。JQuery问题

javascript jquery html

Javascript 从RESTAPI获取图像。JQuery问题,javascript,jquery,html,Javascript,Jquery,Html,两个相关的问题 (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", "Beare

两个相关的问题

(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将该数据放入chrome控制台（开发者工具）。然而，对于png，我看不到任何数据。这让我担心，因为在图片的请求响应中，我看到了二进制数据

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

但是我需要确保它在数据变量中，因为.src=数据行

这引出了我的下一个问题。。。。如果图像二进制数据在“data”变量中，它不应该显示在我的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>

谢谢

为什么需要ajax调用？刚定

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

即使您确实通过ajax调用获取了图像的内容，绕过了所有浏览器问题、编码问题等，您也不能仅仅显示该图像，因为img的“src”属性采用的是URL而不是数据流

除此之外，您的代码似乎还不错，如果我访问JQuery.com并在控制台（FireFox-最新版本）中运行此代码，我将获得数据流：

$.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（跨源资源共享）这基本上意味着您可以从不同的域调用它。

我觉得我需要ajax调用，因为它是一个需要授权的链接（承载令牌），除非您可以将流保存到某个位置，然后将的URL设置到该位置，否则您将无法对数据做太多处理。由于这是一个get请求，您可以选择以另一种方式传递身份验证令牌，例如通过URL参数。您的另一个选择是在服务器端发出此请求，在这种情况下，您将在服务器上将src属性设置为端点，然后使用适当的授权头向目标api发出请求，然后将响应流式传输回您的客户端-同样，如果您运行服务器端代码，也可以这样做，这是有道理的。我关心的是请求的二进制数据响应没有存储在“data”变量中，对吗？或者它实际上存储在那里，只是没有用console打印。谢谢你的编辑，它确实有效。它已经给我403 cors错误一段时间了，但现在我在本地主机上设置了https，它工作正常。只需要获取返回到html标记中的图像数据。我会继续努力，让你知道。谢谢