Facebook Graph api profile picture URL

Question

I'm trying to display the profile pic of the logged in user but for some reason the url gets changed. This is the function i've put together

function testAPI() {
    FB.api('/me','GET',{"fields":"picture{url},name"},function(response) {
        var url = response.picture.data.url;
        console.log(url);
        $("#status").html('<p>'+response.name+'</p><figure id="profilePicture"><img href="'+response.picture.data.url+'"/></figure>');
        console.log(document.getElementById('status').innerHTML);
    });
}

the first console log returns:

"https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/p50x50/12036592_10153768750487873_8195289030629933305_n.jpg?oh=5488c4b312a1b077b68243a7998d217e&oe=56BA5DE5&gda=1454718467_89331767e8555ed196c5559340774fbb"

the second returns the correct inner html as the users name diplays but its adding amp; after the & symbols in the url so the profile pic isn't displaying. No idea how to fix this. Any help would be great thanks.

Answer 1

You have incorrect <img/> tag syntax, you should be using src instead of href

Change:

$("#status").html('<p>'+response.name+'</p><figure id="profilePicture"><img href="'+response.picture.data.url+'"/></figure>');

To:

$("#status").html('<p>'+response.name+'</p><figure id="profilePicture"><img src="'+response.picture.data.url+'"/></figure>');