title: Putting image on a html page from API response?
body: <p>I am very new to web development, ajax etc. I have access to Tenor api, so I can send a request like this: </p>
  
  <pre><code>https://api.tenor.com/v1/random?q=MYQUERYSTRING&amp;key=MYAPIKEY&amp;limit=1
  </code></pre>
  
  <p>It responds with an JSON document, which looks like this (I am pasting just the important stuff):</p>
  
  <pre><code>{
    "results": [
      {
        "tags": [], 
        "url": "https://tenor.com/0liG.gif", 
        "media": [ some other JSON data down there ]
      }]
  } 
  </code></pre>
  
  <p>Now I need to access that <code>url</code> parameter. After a bit of googling I have found a partial solution:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;title&gt;Sample Page&lt;/title&gt;
        &lt;script&gt;
           var settings = {
             "async": true,
             "crossDomain": true,
             "url": "https://api.tenor.com/v1/random?q=MYQUERY&amp;key=MYAPIKEY&amp;limit=1",
             "method": "GET"
           }
  
           $.ajax(settings).done(function (response) {
             console.log(response);
  
             var content = response.results.url;
             $("#myUrl").append(content);
           });
        &lt;/script&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;h1&gt;Sample Page&lt;/h1&gt;
        &lt;div id="someid"&gt;URL: 
            &lt;img id="myUrl" src="" /&gt;
        &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But the image is not displayed.</p>
  
  <p>I have opened the console, and I am absolutely sure that the response is full of data and contains the URL to the image I need.</p>
  
  <p>How can I display this image?</p>