How to Get the Current User Profile Photo in Salesforce Visualforce

When building custom header bars, user profile cards, or personalized dashboards in Salesforce, displaying the logged-in user's profile picture adds a polished, personal touch. Accessing this photo in Visualforce requires querying the User object in Apex and binding the resulting image URL to your markup.

In plain words: You can fetch the active user's avatar image by querying the FullPhotoUrl or SmallPhotoUrl field on the User object using UserInfo.getUserId(). Once retrieved, bind the URL to an <apex:image> tag to display the photo directly on your Visualforce page.

Step 1: Create the Custom Apex Controller

In your Apex class constructor, use UserInfo.getUserId() to filter the SOQL query for the current user's ID, and assign the FullPhotoUrl string to a getter property.

Real-Life Example: Apex Controller Snippet
This Apex controller retrieves the active user's high-resolution profile photo URL during page initialization:

public with sharing class UserProfilePhotoController {
    
    public String photoURL { get; set; }

    public UserProfilePhotoController() {
        // Query the FullPhotoUrl field for the logged-in user
        User currentUser = [
            SELECT Id, FullPhotoUrl, SmallPhotoUrl 
            FROM User 
            WHERE Id = :UserInfo.getUserId() 
            LIMIT 1
        ];
        
        photoURL = currentUser.FullPhotoUrl;
    }
}

Step 2: Bind the Photo URL in Visualforce

In your Visualforce page markup, reference the controller property inside an <apex:image> component.

<apex:page controller="UserProfilePhotoController">
    <apex:pageBlock title="Logged-in User Profile">
        <apex:pageBlockSection columns="1">
            <!-- Renders the user avatar -->
            <apex:image value="{!photoURL}" alt="User Profile Photo" style="border-radius: 50%; width: 120px; height: 120px;" />
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

Common Developer Pitfalls:

• Small vs. Full Image Resolution: Use FullPhotoUrl for large banners or profile cards, and SmallPhotoUrl for compact icons or table rows to optimize image rendering performance.
• Guest User Permissions: If your Visualforce page is exposed publicly via Salesforce Experience Cloud (Sites), ensure guest users have adequate object permissions to read photo URL fields without throwing execution exceptions.
• Unnecessary SOQL Queries: If you only need global user information in Visualforce without custom Apex logic, you can also access global scope variables directly in markup using {!$User.SmallPhotoUrl} or {!$User.FullPhotoUrl} without writing a custom controller!

You can use global merge fields like {!$User.FullPhotoUrl} directly inside Visualforce pages to skip custom Apex queries altogether!

360 Summary Card

• Target Object: User
• Key Fields: FullPhotoUrl, SmallPhotoUrl
• Global Merge Field Alternative: {!$User.FullPhotoUrl}
• Primary Use Case: Personalized headers, profile cards, and custom navigation bars in Visualforce