个人中心
gpt4 book ai didi

javascript - 将 API 响应中的图像放在 html 页面上？

转载 作者：行者123 更新时间：2023-11-28 17:12:18 25 4
gpt4 key购买 nike

我对 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。

如何显示该图像？

最佳答案

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

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

关于javascript - 将 API 响应中的图像放在 html 页面上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54128575/

25 4 0
文章推荐： html - 如何对齐 div 中的 span 元素
文章推荐： python - 如何重启由 Supervisord 运行的 Celery Worker
文章推荐： javascript - 在 AngularJs 中选择 var 的值
文章推荐： javascript - 元素不会显示 js 切换功能