Display Current Login User Profile Picture In Lightning Component

Lightning Component

Hi guys, today in this post we are going to learn how we can show current login user profile image dynamically in salesforce lightning component. this component can be useful for lightning communities where we need to display custom current login user profile picture.

login-user-profile-picture-lightning

Apex Controller  : loginUserProfileCtrl.apxc
public class loginUserProfileCtrl {
  @AuraEnabled 
    public static user fetchUserDetail(){
        return [Select id,Name,SmallPhotoUrl, FullPhotoUrl
                From User
                Where Id =: Userinfo.getUserId()];
    }
}
Lightning Component : loginUserPicture.cmp
<aura:component controller="loginUserProfileCtrl"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
                access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="oUser" type="user" default="{'sobjectType' : 'User'}" />
  
    <div style="padding:100px">
        <img src="{!v.oUser.FullPhotoUrl}" alt="{!v.oUser.Name}"/> 
           <br/><br/>
        <img src="{!v.oUser.SmallPhotoUrl}"  alt="{!v.oUser.Name}"/>
           <br/><br/>
        <lightning:avatar src="{!v.oUser.SmallPhotoUrl}" />
    </div>  
    
</aura:component>
JavaScript Controller : loginUserPictureController.js
({
    doInit : function(component, event, helper) {
        var action = component.get("c.fetchUserDetail");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var res = response.getReturnValue();
                component.set('v.oUser', res);
            }
            else if (state === "INCOMPLETE") {
                // do something
            }
                else if (state === "ERROR") {
                    var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            console.log("Error message: " + 
                                        errors[0].message);
                        }
                    } else {
                        console.log("Unknown error");
                    }
                }
        });
        $A.enqueueAction(action);	
    },
})
Lightning Application [output.app]
<aura:application extends="force:slds">
    <c:loginUserPicture/>
<!-- here c: is org. default namespace prefix-->
</aura:application>

Lightning Component Output :

login

Happy Learning 

Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference.

Check Out Also : Formula Fields to Display Images From Files/Content Documents – Salesforce Lightning/Classic

One thought on “Display Current Login User Profile Picture In Lightning Component

  • Thanks for your great post! But I am not able to save the controller and getting this below issue :

    Failed to save CL_loginUserPicture.cmp: Invalid definition for null:loginUserProfileCtrl: Select id,Name,SmallPhotoUrl, FullPhotoUrl from ^ ERROR at Row:1:Column:16 No such column ‘SmallPhotoUrl’ on entity ‘User’. If you are attempting to use a custom field, be sure to append the ‘__c’ after the custom field name. Please reference your WSDL or the describe call for the appropriate names.: Source

    Can you please let me know what is the issue here ?

    Thanks again

Leave a Reply