.NET Maui How to convert a byte array image to a .NET maui image

Question

Hi There seems to be some difference between the System.Drawing.Image and the Microsoft.Maui.Controls.Image, and I have failed implementing any of the solutions found online.

I have a test page created with this Xaml code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MovieTest.MainPage"
             Title="Mainpage">

    <Grid
        ColumnDefinitions="*,Auto"
        ColumnSpacing="1"
        RowDefinitions="Auto,*"
        RowSpacing="0">

        <VerticalStackLayout Padding="2">
            <Image WidthRequest="150" HeightRequest="200" BackgroundColor="Azure" x:Name="ActorImage" Source="aImage"/>
            <Label x:Name="sTitle" VerticalOptions="Center" HorizontalOptions="Center" />
        </VerticalStackLayout>
    </Grid>
</ContentPage>

The code behind looks like this:

using Microsoft.Maui.Controls;

namespace MovieTest;

public partial class MainPage : ContentPage
{
    public MovieService.MovieWebServiceClient movieService = new MovieService.MovieWebServiceClient();

    public MainPage()
    {
        InitializeComponent();
    
        MovieService.ResponseAuthority sTicket = movieService.GetAuthorization("xxxxxxxxx", "xxxxxxxxx");

        MovieService.ResponseActorData actorData = movieService.GetActorDetails(sTicket.RespData, 244);
        MovieService.ActorData[] actorInfo = new MovieService.ActorData[1];
        actorInfo = actorData.RespData;
        sTitle.Text = "Detaljer för " + actorInfo[0].tActFirstName + ' ' + actorInfo[0].tActLastName;
        byte[] imageAsBytes = (byte[])actorInfo[0].tActPhoto;
        var stream = new MemoryStream(imageAsBytes);
        Image aImage = new Image
        {
            Source = ImageSource.FromStream(() => stream)                
        };
        
    }
}

MovieService.ActorData is a class containing several object, but the ones used here is tActFirstName, tActLastName which both are strings and tActPhoto which is a byte array (Byte[])

As you can see I try to convert the byte array to a stream which is then used as an ImageSource for the Xaml image. This does not work, as well as all other tests I have done. The code above seems to give this error: [Glide] class com.bumptech.glide.load.engine.GlideException: Failed to load resource

I have limited experience in C# developing, and this seems to be over my head.

Can anyone help me with as sample applying text and image to the page from the C# code behind?

Answer 1

Hello,

I make a fake byte[] array and convert this array to Stream, it works. You could try to set the source for ActorImage and change the Source ：

My Testing

private async void OnCounterClicked(object sender, EventArgs e)
      {// click button to test
 byte[] imageArray =  await Download("https://aka.ms/campus.jpg");// get a fake byte[]
        MemoryStream memory = new MemoryStream(imageArray);
        ActorImage.Source = ImageSource.FromStream(()=>(Stream)memory);
}

The following code is only for fake data.

 public async Task<byte[]> Download(string url)
    {
        using (HttpClient client = new HttpClient())
        {
            byte[] fileArray = await client.GetByteArrayAsync(url);
            return fileArray;
        }
    }

Best Regards,

Wenyan Zhang

---

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.