title: Displaying images inside table using JQuery
body: <p>I am sending requests to an API using AJAX and retrieving a response with JSON containing image urls and various metadata with it.</p>
  
  <p>I am trying to display these images in a html table but for some reason <code>localhost:8000</code> (I am testing this from localhost) is being appended in the beginning of every url inside the image tag.</p>
  
  <p>This is the code for generating the html from the AJAX response:</p>
  
  <pre><code>success: function(response) {
              var trHTML = '';
              $.each(response, function (i, item) {
                  var img1 = '&lt;a href="' + item.url1 + '"&gt;&lt;img src="&gt;' + item.url1 + '"&gt;&lt;/a&gt;';
                  var img2 = '&lt;a href="' + item.url2 + '"&gt;&lt;img src="&gt;' + item.url2 + '"&gt;&lt;/a&gt;';
  
                  trHTML += '&lt;tr&gt;&lt;td&gt;' + item.score + '&lt;/td&gt;&lt;td&gt;' + img1 + '&lt;/td&gt;&lt;td&gt;' + img2 + '&lt;/td&gt;&lt;/tr&gt;';
              });
                  // append results to table
                  $('#resultsTable').append(trHTML);
            }
  </code></pre>
  
  <p>Only 404 - img not found icons are displayed since they are pointing to the following urls:</p>
  
  <pre><code>http://localhost:8000/%3Ehttps://url-of-my-image.jpg
  </code></pre>
  
  <p>However, the url inside the <code>href</code> command is working just fine and is pointing to the correct location: <code>https://url-of-my-image.jpg</code></p>
  
  <p>Could someone explain what is going on? One time, the problem is only with the url inside <code>&lt;img src='url'&gt;</code> tag.</p>