Display a current user profile picture

Question

I am a newbie just started with SharePoint's development. I am trying to develop an app for my online site. I would like to show a current user profile picture through asp Image box . Can someone help me achieve this?

Thanks

Answer 1

First you need to add the references to the UserProfile.js file.

<script src="/_layouts/15/SP.UserProfiles.js"></script>

Now you can add the following code in your App.js file.

(function ($) {

$(document).ready(function () {
    // Ensure that the SP.UserProfiles.js file is loaded before the custom code runs.
    SP.SOD.executeOrDelayUntilScriptLoaded(loadUserData, 'SP.UserProfiles.js');
});

var userProfileProperties;

function loadUserData() {

    //Get Current Context   
    var clientContext = new SP.ClientContext.get_current();

    //Get Instance of People Manager Class
    var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);

    //Get properties of the current user
    userProfileProperties = peopleManager.getMyProperties()

    clientContext.load(userProfileProperties);

    //Execute the Query.
    clientContext.executeQueryAsync(onSuccess);

}

function onSuccess() {
    // Here comes the url of the profile pic
    var userProfilePic = userProfileProperties[1];

}
});

As you can see, I am assigning the userProfilePic variable with the url of the profile pic. So you can set it to the image you need.

Also you need to provide Read Permission to the User Profile as in following image.