Поместить изображение на HTML-страницу из ответа API? - PullRequest
Новая
       3

Поместить изображение на HTML-страницу из ответа API?

0 голосов
/ 10 января 2019

Я очень плохо знаком с веб-разработкой, 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-адрес нужного мне изображения.

Как я могу отобразить это изображение?

Ответы [ 4 ]

0 голосов
/ 10 января 2019

Я вижу две ошибки в вашем коде на основе объекта ответа, который вы дали.

Во-первых: 

$.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);

Это должно сработать после этих 2 шагов. но если это не следует

Третье:

обернуть все внутри $ .ajax () с помощью $ (document) .ready (), как показано в следующем коде: 

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

    });
});

Надеюсь, это решило вашу проблему

0 голосов
/ 10 января 2019

Попробуйте заменить 

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

с 

 $("#myUrl").attr('src', content);
0 голосов
/ 10 января 2019

Вам нужно установить атрибут src img следующим образом, 

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

    if (response.results[0].length > 0) {
       var content = response.results[0].url; 
       $( '#myUrl' ).attr( 'src', content );
    }
});
0 голосов
/ 10 января 2019

Вам необходимо установить атрибут src изображения. Также results - это массив. 

 $.ajax( settings ).done( function ( response ) {
       $( '#myUrl' ).attr( 'src', response.results[ 0 ].url );
 } );
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...