Getting Started with Blazor Avatar Component

11 Aug 20212 minutes to read

This section briefly explains about how to include a Avatar in your Blazor application. You can refer Getting Started with Syncfusion Blazor for Server-Side in Visual Studio 2019 page for the introduction and configuring the common specifications.

Importing Syncfusion Blazor component in the application

  • Install Syncfusion.Blazor NuGet package to the application by using the NuGet Package Manager.

  • You can add the client-side style resources using NuGet package to the <head> element of the ~/wwwroot/index.html page in Blazor WebAssembly app or ~/Pages/_Host.cshtml page in Blazor app.

    You can also add the client-side style resources through CDN.

          <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
          <link href="" rel="stylesheet" />
    • For Internet Explorer 11 kindly refer the polyfills. Refer the documentation for more information.
          <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
          <script src=""></script>

Adding Avatar component to the application

Now, add the Syncfusion Avatar component in any web page razor in the Pages folder. For example, the Avatar component is added in the ~/Pages/Index.razor page.

<!-- xSmall Avatar-->
<div class="e-avatar e-avatar-xsmall image"></div>

<!-- Small Avatar-->
<div class="e-avatar e-avatar-small image"></div>

<!-- Avatar-->
<div class="e-avatar image"></div>

<!-- Large Avatar-->
<div class="e-avatar e-avatar-large image"></div>

<!-- xLarge Avatar-->
<div class="e-avatar e-avatar-xlarge image"></div>

Run the application

After successful compilation of your application, simply press F5 to run the application.

Output be like the below.

Blazor Avatar Component