Dispalying image from base 64 string

-- -- 666 Reputation points
2021-11-17T22:34:54.76+00:00

Hi

I have an ImageUrl property which is derived from a sql server nvarchar(max) column 'Image' as below.

           public string ImageUrl
            {
                get
                {
                    if (!string.IsNullOrEmpty(Image))
                    {
                        return string.Format("data:{0};base64,{1}", MimeType, Image);
                    }

                    return string.Empty;
                }
            }

How can I display the ImageUrl property as image in a page please? Currently I have below code but image does not appear.

                <CarouselView>
                    <CarouselView.ItemTemplate>
                        <DataTemplate x:DataType="models:TeamMember">
                                <Image Source="{Binding ImageUrl}" >
                                        <Image.VerticalOptions>
                                            <OnPlatform x:TypeArguments="LayoutOptions"
                                            Android="FillAndExpand"
                                            iOS="EndAndExpand"/>
                                        </Image.VerticalOptions>
                                    </Image>
                        </DataTemplate>
                    </CarouselView.ItemTemplate>
                </CarouselView>

Thanks

Regards

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
4,820 questions
No comments
{count} votes

Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 41,821 Reputation points Microsoft Employee
    2021-11-18T02:07:30.817+00:00

    Hello,​

    Welcome to our Microsoft Q&A platform!

    Do you receive the data type like following string from sql server? Not the ImageUrl, am I right?

       Base64 = "iVBORw0KGgoAAAANSUhEUgAAATgAAABgCAIAAAAGt/kTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAFGSURBVHhe7dOhCYAAAABBBzE6scFBxLWsgs1uExR8OLj0/Yd9nICfMyoEGBUCjAoBRoUAo0KAUSHAqBBgVAgwKgQYFQKMCgFGhQCjQoBRIcCoEGBUCDAqBBgVAowKAUaFAKNCgFEhwKgQYFQIMCoEGBUCjAoBRoUAo0KAUSHAqBBgVAgwKgQYFQKMCgFGhQCj8q1z3Y55uUWeMirfcukrjAoBRoUAo0KAUSHAqBBgVAgwKgQYFQKMCgFGhQCjQoBRIcCoEGBUCDAqBBgVAowKAUaFAKNCgFEhwKgQYFQIMCoEGBUCjAoBRoUAo0KAUSHAqBBgVAgwKgQYFQKMCgFGhQCjQoBRIcCoEGBUCDAqBBgVAowKAUaFAKNCgFEhwKgQYFQIMCoEGBUCjAoBRoUAo0KAUSHAqBBgVAgwKgQYFQKMCr83Thd2mJwcg+PUfAAAAABJRU5ErkJggg=="  
    

    If so, you need convert the Base64 string to Stream then set it to the ImageSource.

    Firstly, you need to create a class called Base64ToImageSource.cs.

       public class Base64ToImageSource : IValueConverter  
           {  
               ImageSource image;  
               public object Convert(object value, Type targetType, object parameter, CultureInfo culture)  
               {  
         
                   byte[] bytes = System.Convert.FromBase64String(value.ToString());  
                   image = ImageSource.FromStream(() => new MemoryStream(bytes));  
         
                   return image;  
               }  
         
               public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)  
               {  
                   return value;  
               }  
           }  
    

    Then use this convert to the Image binding like following layout.

       <!-- declare the Base64ToImageSource -->  
         <ContentPage.Resources>  
               <ResourceDictionary>  
                   <local:Base64ToImageSource x:Key="Base64ToImageSource" />  
               </ResourceDictionary>  
           </ContentPage.Resources>  
           <StackLayout>  
         
               <CollectionView x:Name="PhotoView"  ItemsSource="{Binding Myphotos}" >  
                   <CollectionView.ItemTemplate>  
                       <DataTemplate>  
                           <StackLayout>  
                                       <!-- binding the Base64 string and convert it -->  
                               <Image Source="{Binding Base64, Converter={StaticResource Base64ToImageSource}}"></Image>  
                           </StackLayout>  
                       </DataTemplate>  
                   </CollectionView.ItemTemplate>  
               </CollectionView>  
         
                 
           </StackLayout>  
    

    In the VIewModel, you just need to add Base64 string directly.

    Best Regards,

    Leon Lu


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    No comments

0 additional answers

Sort by: Most helpful