How to display Image on Xaml Xamarin Forms on MVVM - xaml

Question

I have tried to display and image from Mobile camera using Media Plugin. but It does not display after select the image. I am using MVVM.
I'd appreciate any help.
private byte[] imgAsBytes;
private ImageSource imageSource;
//constructor
public NoticesAdminViewModel()
{
_connection = DependencyService.Get<IConnection>().GetConnection();
UploadImage = new DelegateCommand(async () => await GetImage());
}
public DelegateCommand UploadImage { get; set; }
public ImageSource DisplayImageSource
{
get { return imageSource; }
set
{
imageSource = value;
SetProperty(ref imageSource, value);
}
}
public async Task GetImage()
{
file = await DependencyService.Get<IMediaFile>().GetFile();
//file is not null
DisplayImageSource = ImageSource.FromStream(() => file.GetStream());
}
//My Xaml
//Display Image Here
<Image
Aspect="AspectFit"
HeightRequest="200"
Source="{Binding DisplayImageSource}"
WidthRequest="200"/>
// Button to call image
<Image Source="camera.png" HorizontalOptions="Center">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding UploadImage}" />
</Image.GestureRecognizers>
</Image>
Which file returns the MediaFile content successfully, and I can upload the image to server, but the Xaml to display image is blank.
What have I done wrong?
Thanks

Answer 1

First, your code shows you're binding the image's Source to UploadImage, but you'd want it to be bound to your ImageSource property.
Also, in your GetImage() method, you are copying the file contents to a memory stream, copying that into a byte array, but you never use it. Why?
You then immediately dispose both the file and stream and setup the image source pointing to file.GetStream(), but you've already disposed that file.
Try cutting out all that and just do:
public async Task<ImageSource> GetImage()
{
file = await DependencyService.Get<IMediaFile>().GetFile();
ImageSource = ImageSource.FromStream(() => file.GetStream());
return ImageSource;
}