images won't load when page is hosted

https://envincebal.github.io/api-hack/index.html

Hey everyone, I pushed my api project on github's gh-page hosting. The link is right above. Everything works except the images are broken. The images work when I run the project locally. On the console, it gives an error message "GET https://envincebal.github.io/uploads/scale_large/8/82063/2267410-fusion.jpg 404 (Not Found)"

Any help would be greatly appreciate.

Here's my code: *SIDE NOTE: The "http" protocol was removed from the endpoint because it caused an error when making a request while on the hosted site.

$("#search").submit(function(event) {

event.preventDefault();

var userInput = $("#query").val();

getRequest(userInput);

});

function showResults(result) {

var html = "";

$.each(result.results, function(index, value) {

var gameName = value.name;

var boxArt = value.image ? value.image.super_url : '';

var summary = value.deck;

var site_detail = value.site_detail_url;

html += "<li><p class='game-title'>" + gameName + "</p>" + "<img src=" + boxArt + " class='game-image'>" + "<p class='game-summary'>" + summary + "</p>" + "<a href='" + site_detail + "' ><p class='game-details'>Click for more information</p></a></li>";

});

$("#search-results").html(html);

}

function getRequest(userInput){

$.ajax({

url: "http://www.giantbomb.com/api/search",

type: "GET",

data: {

resources: "game",

query: userInput,

api_key: "8cd10a7136710c1003c8e216d85941ace5a1f00e",

format: "jsonp",

crossDomain: true,

limit: 15,

field_list: "deck,name,image,site_detail_url",

json_callback: 'showResults'

},

dataType: "jsonp"

}).done(function(data) {

showResults(data.results);

console.log(data);

});

}

Well, this url is wrong

https://envincebal.github.io/uploads/scale_large/8/82063/2267410-fusion.jpg

it should be: http://static.giantbomb.com/uploads/scale_large/8/82063/2267410-fusion.jpg

But this is not your fault. It's a bug.

@edgework

When I use my API key with www.giantbomb.com/api/search/?api_key=...&query=phantasmagoria&resources=game I'm getting absolute URLs for images (wtih static.giantbomb.com) and when I use the one from this page the URLs are relative (/uploads/....). Wierd.

The code in your post isn't what's running on the live example, this is.

By removing the "http" portion of the URL, your API requests are defaulting to HTTPS since no protocol is specified. That causes a problem because when making API requests over HTTPS, image URLs are returned without the hostname (i.e. as relative links).

@szlifier You can see that happening with this request:

https://www.giantbomb.com/api/search/?resources=game&query=mass+effect&api_key=[API_KEY]&format=json

@envincebal You'll need to prepend "http://static.giantbomb.com" to each of your image URLs, which will cause a console warning about insecure content, but it'll work. You can't use "https://static..." because Giant Bomb's image server doesn't seem to support HTTPS, as you can see here.

@hogonalog: I did more tests and there is a cache involved. So even if you make a second request without https it will still return relative URLs for the same query.

And it goes the other way too. If you make a request over http and then over https, both will return absolute image URLs.

The conclusion: Don't use https at all, or append the http://static.giantbomb.com to URLs

@szlifier Yeah you're right, I just checked, really good find. All the more reason to not make API calls straight from a browser, imo.

@szlifier: Wow yeah. That's dumb on our part. Do me a favor, send me a direct email so I don't forget about this. I've got so much going on right now.

@edgework: Done.

Thanks for all your help, guys.

@szlifier and @hogonalog, forgive my newbie question but how would I prepend static link to my image urls?

@envincebal:

Find the line with "var boxArt = ..." and add this right after it:

if (boxArt != '') {
boxArt = 'http://static.giantbomb.com' + boxArt;
}

@hogonalog Thank you so much! You're a life saver :)