How to show Current User Profile Picture in Lightning Component

Hello frnds today post learn how to show current user profile picture in lightning component
so let us start.......

Step=>1.
           goto developer console and create lightning component
             File=>New=>Lighning Component
               DisplayUserPhoto.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'}" />
    <h1>Current User Profile Picture</h1>
    <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>

Step=>2.
     DisplayUserPhotoController.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);
    },
})

Step=>3.
    create a Apex Class
            goto File=>New=>Apex Class

       LoginUserProfileCtrl.apxc

  public class LoginUserProfileCtrl {
  @AuraEnabled
    public static user fetchUserDetail(){
        return [Select id,Name,SmallPhotoUrl, FullPhotoUrl
                From User
                Where Id =: Userinfo.getUserId()];
    }
}

                                   

                            Output:

Thanks.!

Buy me a coffee