Get image URL of column type Person or Group using JavaScript

Question

Have a column in a SharePoint 2010 list set to Person or Group. Name (with Picture)

I've created JavaScript code that gets the Name, ID etc. However I also want to get the image. I've tried the code below but it outputs the name of the person, I've also tried .get_url but then an error:

The property or field has not been initialized. It has not been requested or the request has not been executed. It may need to be explicitly requested.

I am loading Photo column explicitly:

clientContext.load(collListItemBlog,'Include(Photo)');
//
//later 
alert (oListItem.get_item('Photo').get_lookupValue());  // prints name 
alert (oListItem.get_item('Photo').get_url());   // errors

How can I get the picture url and add it to my javascript page?

Thanks

Answer 1

You need to query the site info list. Try below code:

clientContext.load(collListItemBlog,'Include(Photo)');
//
//later 
console.log(oListItem.get_item('Photo').get_lookupValue());  // prints name 

var userID = item.get_item('Photo').get_lookupId();

getUserDetails(userID);

Now the getUserDetails function would be as below:

function getUserDetails(userID)
{
    var clientContext = new SP.ClientContext.get_current();
    var web = clientContext.get_web();
    var userInfoList = web.get_siteUserInfoList();
    var camlQuery = new SP.CamlQuery();

    camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'ID\'/>' +'<Value Type=\'Number\'>' + userID + '</Value></Eq>' +
    '</Where></Query><RowLimit>1</RowLimit></View>');

    this.collListItem = userInfoList.getItems(camlQuery);
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args)
{

    var item = collListItem.itemAt(0);
    console.log(item);

    var picture = item.get_item('Picture');
//could be as 
//var picture = item.get_item('PictureUrl');
    console.log(picture);
}
function onQueryFailed(sender, args)
{
}

If you dont want this query, you can also try the below url where you can pass the account name as query string:

/_layouts/userphoto.aspx?size=M&accountname=userName