Cannot load Avatar from URL

[Do Vu Xuan]

Hi, 

I'm using SfAvartarView to display user's avatar. 

Here is my code:

  <sf:SfAvatarView Grid.Row="0"

                   Grid.Column="0"

                   Grid.RowSpan="2"

                   CornerRadius="2"

                   HeightRequest="{OnPlatform WinUI=60, MacCatalyst=60}"

                   WidthRequest="{OnPlatform WinUI=60, MacCatalyst=60}"

                   Margin="0"

                   Background="Transparent"

                   AvatarSize="ExtraLarge"

                   AvatarColorMode="DarkBackground"

                   Stroke="{StaticResource PrimaryBrandBrush}"

                   StrokeThickness="2"

                   Aspect="AspectFit"

                   AvatarName="{Binding Username}"

                   InitialsType="DoubleCharacter">

      <sf:SfAvatarView.ImageSource>

          <UriImageSource Uri="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp "

                          CacheValidity="1"

                          CachingEnabled="true" />

      </sf:SfAvatarView.ImageSource>

  </sf:SfAvatarView>

What happens with my code? or how can I display avatar without using a temp image?

Thanks and regards,

TH

[Brundha Velusamy]

Hi Do Vu Xuan,

Greetings from Syncfusion support!

Query 1: Cannot load Avatar from URL

We recommend setting the ContentType property to Custom on the AvatarView control to display custom images, as shown in the code snippet below. This helps display a custom image in the view.

Here's an example code snippet:

 <sf:SfAvatarView …

                  ContentType="Custom">

 

     <sf:SfAvatarView.ImageSource>

         <UriImageSource

Uri="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp "

…/>

     </sf:SfAvatarView.ImageSource>

 </sf:SfAvatarView>

Query 2: how can I display avatar without using a temp image?

If you want to display avatar characters instead of a custom image, you should set the ContentType property to AvatarCharacter. Additionally, you can also customize the avatar characters using the AvatarCharacter property.

Here's an example code snippet:

 <sf:SfAvatarView …

                  ContentType="AvatarCharacter"

       AvatarCharacter="Avatar1">

 </sf:SfAvatarView>

We have drafted a simple sample based on this approach and attached the sample for your reference. Please review it and let us know if you have any concerns.

For more details, please refer to the following help documentation:

Various customization in Syncfusion AvatarView control.

We hope this helps! If you have any further questions or need additional assistance, please feel free to reach out.

Regards,

Brundha V

Attachment: AvatarSample_ContentType_5879fa12.zip