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.