从 API 响应中将图像放在 html 页面上？答案

【问题标题】：Putting image on a html page from API response?从 API 响应中将图像放在 html 页面上？
【发布时间】：2019-01-10 12:18:22
【问题描述】：

我对 web 开发、ajax 等非常陌生。我可以访问 Tenor api，所以我可以发送这样的请求：

https://api.tenor.com/v1/random?q=MYQUERYSTRING&key=MYAPIKEY&limit=1

它响应一个 JSON 文档，看起来像这样（我只粘贴重要的东西）：

{
  "results": [
    {
      "tags": [], 
      "url": "https://tenor.com/0liG.gif", 
      "media": [ some other JSON data down there ]
    }]
}

现在我需要访问 url 参数。经过一番谷歌搜索，我找到了部分解决方案：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <title>Sample Page</title>
      <script>
         var settings = {
           "async": true,
           "crossDomain": true,
           "url": "https://api.tenor.com/v1/random?q=MYQUERY&key=MYAPIKEY&limit=1",
           "method": "GET"
         }

         $.ajax(settings).done(function (response) {
           console.log(response);

           var content = response.results.url;
           $("#myUrl").append(content);
         });
      </script>
   </head>
   <body>
      <h1>Sample Page</h1>
      <div id="someid">URL: 
          <img id="myUrl" src="" />
      </div>
   </body>
</html>

但是图片没有显示出来。

我已经打开了控制台，我绝对确定响应中充满了数据，并且包含了我需要的图像的 URL。

如何显示此图像？

【问题讨论】：

你在console.inf(response)时看到了什么？
见append()和attr()。 Append 将文本添加到内部 html

标签： javascript jquery json ajax api

【解决方案1】：

你需要设置图片的src属性。另外，results 是一个数组。

 $.ajax( settings ).done( function ( response ) {
       $( '#myUrl' ).attr( 'src', response.results[ 0 ].url );
 } );

【讨论】：

【解决方案2】：

尝试替换

 $("#myUrl").append(content);

与

 $("#myUrl").attr('src', content);

【讨论】：

results 是一个数组。
这是一回事，但response.results.url 仍未定义。 response.results 是一个数组。
当然，你是对的。没注意这个。刚刚看到 var "content"。

【解决方案3】：

你需要设置src属性img标签如下，

$.ajax( settings ).done( function ( response ) {

    if (response.results[0].length > 0) {
       var content = response.results[0].url; 
       $( '#myUrl' ).attr( 'src', content );
    }
});

【讨论】：

【解决方案4】：

根据您提供的响应对象，我可以在您的代码中看到 2 个错误。

第一：

$.ajax(settings).done(function (response) {
           console.log(response);

           var content = response.results.url;
           $("#myUrl").append(content);
         });

这

var content = response.results.url;

应该是

var content = response.results[0].url;

第二：

$("#myUrl").append(content); 应该是 $("#myUrl").attr('src', content);

这两个步骤后应该可以工作了。但如果它不遵循

第三：

使用 $(document).ready() 将 $.ajax() 中的所有内容包装起来，如下代码：

$.ajax(settings).done(function (response) {
    $(document).ready(function(){
    console.log(response);
    var content = response.results[0].url;
    $("#myUrl").attr('src', content);

    });
});

希望这能解决你的问题

【讨论】：