Read the absolute redirected SRC attribute URL for an image

Question

I'm using the Twitter avatar API to fetch a user's avatar URL on the client-side, and I'd like to cache the response, but instead of a regular JSON (or indeed, any other type), they just issue a 302 redirect.

This doesn't work (because it's cross domain):

jQuery.getJSON('https://api.twitter.com/1/users/profile_image/60173.json',
function(data, status, jqxhr){
  console.log("data: ", data);
  console.log("status: ", status);
  console.log("jqxhr: ", jqxhr);
  console.log(jqxhr.getResponseHeader('Location'));
  console.log(jqxhr.getAllResponseHeaders());
})

Data is empty, status is 'success', jqhxr returns a jqxhr object, but the getResponseHeader() and getResponseHeaders() are null because it's a cross-domain call rather than a true XMLHTTP call.

So I thought I might be able to use the load() event to show the actual url of the image after the 302 had happened. I tried this:

function avatar_loaded(img) {
  console.log("We loaded an avatar for %s (img)[0].src is %o
attr('src') is %o getAttribute('src') is %o", img, jQuery(img)[0].src, jQuery(img).attr('src'), img.getAttribute("src"));
}

var avatar_url = "https://api.twitter.com/1/users/profile_image/60173";

jQuery('body').append("<img onload='avatar_loaded(this)' src='" +
avatar_url + "' width='0' height='0'>");

You'll see that the avatar_loaded function gets called twice. Once with the initial img src (https://api.twitter.com/1/users/profile_image/60173) and then again, presumably with the 302ed actual image url http://a1.twimg.com/profile_images/1272489576/Photo_38_normal.jpg

But I can't read the redirected absolute URL no matter what I try. Any other ideas?

EDIT: I Didn't want this to turn into a time-sink, so I just used the

http://api.twitter.com/1/users/show.json?user_id=

API call. I'd imagined that this would require an authenticated call for protected users, it doesn't so it's fine to use.

it gets called twice but with the same src: http://jsfiddle.net/ionutzp/6Ekub/ — ipopa, Mar 24 '11 at 16:00

score 1 · Accepted Answer · answered Mar 30 '11 at 11:43

Rather than use the

http://api.twitter.com/1/users/profile_image/<user_id>

API call, I used

http://api.twitter.com/1/users/show.json?user_id=

instead and extracted the avatar URL from there. It's not as light-weight because it returns a raft of other user data too, but even protected users avatars are returned without the need for authentication, so it's a suitable replacement.

score 0 · Answer 2 · answered Mar 24 '11 at 16:04

0

Here's code that loads it only once: http://jsfiddle.net/ionutzp/6Ekub/1/

avatar_loaded = function(img) {
  console.log("We loaded an avatar for %s (img)[0].src is %o attr('src') is %o getAttribute('src') is %o", img, jQuery(img)[0].src, jQuery(img).attr('src'), img.getAttribute('src'));
}

var avatar_url = "https://api.twitter.com/1/users/profile_image/60173";

$(window).load(function(){
        var img = new Image();
        $(img).load(function(){avatar_loaded(this)}).attr('src',avatar_url).appendTo('body');
       //jQuery('body').append("<img onload='' src='" + avatar_url + "' width='100' height='100'>");
});

answered Mar 24 '11 at 16:04

ipopa

1,223
11
12

Thanks for the singular load change, but what I'm trying to do is get the redirected image URL - in the console.log, you'll see that the src is the same as the html https://api.twitter.com/1/users/profile_image/60173 rather than the redirected URL that I'd like to read http://a1.twimg.com/profile_images/1272489576/Photo_38_normal.jpg – jaygooby Mar 24 '11 at 16:22
why do you need the absolute one? – ipopa Mar 25 '11 at 11:21
Because the https://api.twitter.com/1/users/profile_image/ URL is a Twitter API call subject to rate-limiting. Best practice is to call it once, cache the answer for some time and use the cached reply instead. – jaygooby Mar 25 '11 at 13:08

Read the absolute redirected SRC attribute URL for an image

2 Answers2

Linked