Assign an Image to a User

• Feb 02, 2026
• 3 minutes to read

This topic describes how to assign an avatar or icon to an application user. ASP.NET Core Blazor applications display this image in the top right corner of an application page.

Apply the CurrentUserDisplayImage Attribute

You can pass the name of a property that stores a user image to the CurrentUserDisplayImage attribute to display this image in the application toolbar.

Follow the steps below to extend a user class with a property that stores a user image:

1. In a user business class, declare a property of the MediaDataObject (XPO/EF Core), Image, or byte[] type.

2. Apply CurrentUserDisplayImageAttribute to the user class and pass the new property name as its parameter.

   XPO

   C#

   using DevExpress.Persistent.Base;
   using DevExpress.Persistent.BaseImpl;
   // ...
   [CurrentUserDisplayImage(nameof(Photo))]
   public class MyAppUser : PermissionPolicyUser, IObjectSpaceLink, ISecurityUserWithLoginInfo {
       // ...
       private MediaDataObject photo;
       public MediaDataObject Photo {
           get { return photo; }
           set { SetPropertyValue(nameof(Photo), ref photo, value); }
       }
   }
   

   EF Core

   C#

   using DevExpress.Persistent.Base;
   using DevExpress.Persistent.BaseImpl;
   // ...
   [CurrentUserDisplayImage(nameof(Photo))]
   public class MyAppUser : PermissionPolicyUser, IObjectSpaceLink, ISecurityUserWithLoginInfo {
       // ...
       private MediaDataObject photo;
       public virtual MediaDataObject Photo {
           get { return photo; }
           set { SetReferencePropertyValue(ref photo, value); }
       }
   }
   

Add the XafClaimTypes.UserImageUrl Claim

In ASP.NET Core Blazor applications with OAuth authentication, you can add a claim of the XafClaimTypes.UserImageUrl type to read a user image on sign in. The following example configures the Google authentication provider and creates the XafClaimTypes.UserImageUrl claim from the picture key in Google user data:

File: MySolution.Blazor.Server\Startup.cs.

C#

using DevExpress.ExpressApp.Security;
using Microsoft.AspNetCore.Authentication.OAuth;
using Microsoft.AspNetCore.Authentication;
using Microsoft.Extensions.DependencyInjection;
// ...
public class Startup {
    // ...
    public void ConfigureServices(IServiceCollection services) {
        // ...
        services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
        .AddCookie(options => options.LoginPath = "/LoginPage")
        .AddGoogle(options => {
            // ...
            options.ClaimActions.MapJsonKey(XafClaimTypes.UserImageUrl, "picture");
        });
    }
}

Register an IUserProfileInfoProviderAsync Service

You can register a service that implements the IUserProfileInfoProviderAsync interface to specify a custom user image and name. Follow the steps below to implement this technique in your application:

1. In the ASP.NET Core Blazor application project, create a new class that implements the IUserProfileInfoProviderAsync interface:

   File: MySolution.Blazor.Server\Services\MyUserProfileInfoProviderAsync.cs.

   C#

   using DevExpress.ExpressApp.Blazor.Services;
   using DevExpress.ExpressApp.Security;
   using System;
   using System.Threading.Tasks;
   // ...
   public class MyUserProfileInfoProviderAsync : IUserProfileInfoProviderAsync {
       private readonly IPrincipalProvider principalProvider;
       private readonly ISecurityStrategyBase securitySystem;
       public MyUserProfileInfoProviderAsync(IPrincipalProvider principalProvider, ISecurityStrategyBase securitySystem) {
           this.principalProvider = principalProvider;
           this.securitySystem = securitySystem;
       }
   
       public Task<string> GetUserImageUrlAsync(Func<Task<string>> defaultUrlAccessor) {
           //or: securitySystem.UserName == "Admin"
           if(principalProvider.User.Identity.Name == "Admin") {
               return Task.FromResult(@"https://github.com/DevExpress.png");
           }
           return defaultUrlAccessor();
       }
   
       public Task<string> GetUserNameAsync(Func<Task<string>> defaultNameAccessor) {
           //or: principalProvider.User.Identity.Name == "Admin"
           if(securitySystem.UserName == "Admin") {
               return Task.FromResult(@"Custom Admin Name");
           }
           return defaultNameAccessor();
       }
   }
   

2. Add this scoped service to your ASP.NET Core Blazor application service collection:

   File: MySolution.Blazor.Server\Startup.cs.

   C#

   public class Startup {
       // ...
       public void ConfigureServices(IServiceCollection services) {
           // ...
           services.AddScoped<IUserProfileInfoProviderAsync, MyUserProfileInfoProviderAsync>();
       }
   }