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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
public class loginUserProfileCtrl { @AuraEnabled public static user fetchUserDetail(){ return [Select id,Name,SmallPhotoUrl, FullPhotoUrl From User Where Id =: Userinfo.getUserId()]; } } |
Lightning Component : loginUserPicture.cmp
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
({ 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]
|
1 2 3 4 5 6 7 8 |
<aura:application extends="force:slds"> <c:loginUserPicture/> <!-- here c: is org. default namespace prefix--> </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
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