Display Current Login User Profile Picture In 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.

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'}" />

<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/>

</aura:application>

Lightning Component Output :

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

(Visited 7,813 times, 1 visits today)

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

Yamini

May 10, 2019 at 7:53 pm

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