Question

因此，我正在寻找可返回图像的第三方API。我应该在div中显示返回的图像（该图像最初包含一个加载图像），但是我无法这样做。我已经尝试了多种方法（如下文所示），但是它们都不起作用。

浏览器的“网络”选项卡显示正在接收请求，并且图像也显示为响应。

我的代码如下（我将其精简到了最低要求）

    <script
              src="https://code.jquery.com/jquery-3.4.1.js"
              integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
              crossorigin="anonymous"></script>
<script>

$.ajax
({
  type: "GET",    
  url:"https://third-party-api.com/path/to/rest/api/",
  headers: {
    "Authorization": "bearer value-of-token"
  },
  success: function (data){
    console.log('SUCCESS');
    console.log(data); 
    //data above is logged as jumbled characters in browser
    $('#t').attr('src','data:image/jpeg,' + data);
    //above line shows a broken image
    $('#t').attr('src','data:image/jpeg;base64,' + btoa(data));
    // above line (with base64) says there are invalid characters in string
    // however the  browser network tab shows image correctly
  },
  error: function(err)
  {
    console.log('ERROR')
    console.log(err);
  }
});

    </script>
    <html>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <body>
        <img src='loading.jpg' id='t'>
    </body>
    </html>

行

console.log('SUCCESS');
console.log(data);

在控制台中打印以下内容：

但是我知道该图像是正确的，因为它可以正确显示在浏览器的“网络”选项卡以及邮递员中。如何获得这样的图像响应以正确地加载到HTML div中？

非常感谢您的帮助！

无法以HTML显示原始图像

0 个答案: