Get user profile picture URL using ID CSOM

Question

I am trying to get the user profile picture url for a user using some JavaScript, I am querying a person and group field in a list and getting the use id via some CAML Query.

However the issue I am having is actually getting the pictureUrl, I currently have the following:

 function loadUserData(){
    SP.SOD.executeFunc('userprofile', 'SP.UserProfiles.PeopleManager', getUserProfile); 
}

function getUserProfile(){
    console.log("getting user profiles");
    context = SP.ClientContext.get_current();
    var peopleManager = new SP.UserProfiles.PeopleManager(context);
    var propertyName = "PictureURL";
    var targetUser = userid;

    userProfileProperty = peopleManager.getUserProfilePropertyFor(targetUser, propertyName)

   context.executeQueryAsync(onSuccess, onFail);
}

function onSuccess() {

    var messageText = "userprofile property is " + userProfileProperty.get_value();     
    alert(messageText);

}

function onFail(sender, args) {
    alert("Error: " + args.get_message());
}   

The userid is set in a previous query and I can see that in the console this is being pulled back succesfully, however I have been unable to pull back the picture url as this currently appears to be coming back blank even though I have a profile picture.

Can anyone provide any help with this please.

Answer 1

Try this REST Call. It's much easier than Fetching from CAML Query.

http://siteURL/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v='DOMAIN\UserName'&$select=AccountName,PictureUrl

If you remove select then you will get all information related to the user.

Answer 2

Here is the code which can be useful for you.

  var targetUser = "SomeDomain\\SomeUserName";
    // Get the current client context.
    var clientContext = new SP.ClientContext.get_current();
    //Get PeopleManager Instance
    var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);
    // Get the properties to retrieve
    var profilePropertyNames = ["PreferredName", "PictureURL"];
    var userProfilePropertiesForUser = new SP.UserProfiles.UserProfilePropertiesForUser(
    clientContext,
    targetUser,
    profilePropertyNames);
    // Get user profile properties for the target user
    userProfileProperties =peopleManager.getUserProfilePropertiesFor(userProfilePropertiesForUser);
    // Load the UserProfilePropertiesForUser object.
    clientContext.load(userProfilePropertiesForUser);
    //Execute the Query
    clientContext.executeQueryAsync(onRequestSuccess, onRequestFail);
}

// This function runs if the executeQueryAsync call succeeds.
function onRequestSuccess() {
    document.getElementById("profilelink").href = userProfileProperties[1];;
    document.getElementById("username").innerHTML = userProfileProperties[0];
    if (userProfileProperties[1]!== null) {
        document.getElementById("Userprofileimage").src = userProfileProperties[1];
    }
}

// This function runs if the executeQueryAsync call fails.
function onRequestFail(sender, args) {
    $get("Userprofileimage ").innerHTML = "Error: " + args.get_message();
}

http://www.sptechlearn.com/2013/07/show-logged-in-user-profile-picture-display-first-name-using-csom-sharepoint-20102013.html