I am trying to display loggedin users image on top of left hand side navigation where I would have a div. Before I do that I want to display same in Content Editor WebPart so that I can have more flexibility to make changes before I apply that in master page. I have following script to display other info regarding user but how do I display a picture?

    <script type="text/javascript">
var currentUser;
function init(){
    this.clientContext = new SP.ClientContext.get_current();
    this.oWeb = clientContext.get_web();
    currentUser = this.oWeb.get_currentUser();
    this.clientContext.executeQueryAsync(Function.createDelegate(this,this.onQuerySucceeded), Function.createDelegate(this,this.onQueryFailed));

function onQuerySucceeded() {
    document.getElementById('userLoginName').innerHTML = currentUser.get_loginName(); 
    document.getElementById('userTitle').innerHTML = currentUser.get_title();
    document.getElementById('userEmail').innerHTML = currentUser.get_email();


function onQueryFailed(sender, args) {
    alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());

<div>Current User: 
    <span id="userLoginName"></span></br>
    <span id="userTitle"></span></br>
    <span id="userEmail"></span></br>

You need to use the SP.UserProfiles.js to get the URL of the user like this:

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

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();
| improve this answer | |
  • Ahmed thank you for you response, on var targetUser = "SomeDomain\\SomeUserName"; are we supposed to assign logged in users domain\username ? – allegro octopus May 19 '16 at 13:54
  • This is what i did and it worked, but i have other javascripts loaded in the page too. Problem is only one javascript code works at a time. How should i resovle this, do you think it is because of ExecuteOrDelayUntilScriptLoaded(getUserProfileImage,'sp.js'); – allegro octopus Jul 7 '16 at 19:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.