Issue loading image source from API with jQuery


I’m having some trouble loading an image from an API. I’ve tried everything I can to find the issue and even used F12 to pinpoint the issue but couldn’t find why it wasn’t finding the source correctly. This is from the Twitchtv API project.
Any help is very much appreciated.

var streamers = ["SypherPK", "Comster404", "dreamhackcs"];

  $.getJSON(''+name+'?callback=?', function(data){
    if ( === null) {
      $('.box').append("<div class='row'><div class='col-md-1 col-xs-3'><img src='"+data.logo+"'></div><div class='col-md-1 col-xs-3'><p>"+name+"</p></div><div class='col-md-1 col-xs-3'>0</div><div class='col-md-2 col-xs-3'>Offline <font color='red'>&#9679</font></div>");
    } else if ( === 'undefined') {
        $('.box').append("Account closed");
      } else {
        $('.box').append("<div class='row'><div class='col-md-1'><p>"+name+"</p></div><div class='col-md-1'>""</div><div class='col-md-2'>Online <font color='green'>&#9679</font></div>");


Have you checked the Browser console? Also the Network tab?

My WAG guess is it could be something to do with mixed content (http/https)


Your loop is looking at the following 3 URLs:

As you can see from looking at those links, there is no logo property for offline/non-existent accounts. You have to request their logo from the /channels/ API endpoint instead:

And, if you get an error (like with Comster404), show a default image because the account does not exist (and therefore has no logo).


Thank you very much. That fixed it :slight_smile:


F12 is the browser console :slight_smile: