Question

I’ve written a simple function to grab an authenticated user’s profile picture and set an <img> to that. While the src attribute is updating properly, the image doesn’t actually change.

function getDefault(){
    FB.api('/me', function(response) {
        $('#default').val("http://graph.facebook.com/" + response.id + "/picture");
    });
    alert($('#default').val());
    }

…

<img id="default" src="getDefault()"/>
<button onclick="getDefault()">Click to see your profile picture!</button>

Answer 1

The attribute isn’t “value”. It’s “src”. So… it should be like this:

$('#getDefault').click(function(){
    FB.api('/me', function(response) {
        $('#default').attr('src', 'http://graph.facebook.com/' + response.id + '/picture');
        alert($('#default').attr('src'));
    });

});

<img id="default" src="getDefault()"/>
<button id="getDefault">Click to see your profile picture!</button>

Update?: Also, the Alert should be inside because maybe you won’t get any value outside…