Avatar image for envincebal
#1 Posted by envincebal (8 posts) -

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

});

}

Avatar image for szlifier
#2 Posted by Szlifier (1496 posts) -

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.

Avatar image for hogonalog
#3 Edited by hogonalog (20 posts) -

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.

Avatar image for szlifier
#4 Edited by Szlifier (1496 posts) -

@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

Avatar image for hogonalog
#5 Posted by hogonalog (20 posts) -

@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.

Avatar image for rick
#6 Posted by rick (506 posts) -

@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.

Avatar image for szlifier
#7 Posted by Szlifier (1496 posts) -
Avatar image for envincebal
#8 Posted by envincebal (8 posts) -

Thanks for all your help, guys.

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

Avatar image for hogonalog
#9 Edited by hogonalog (20 posts) -

@envincebal:

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

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

Avatar image for envincebal
#10 Posted by envincebal (8 posts) -

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