How to show alternate text if image loading failed in .net maui?

Question

<Image x:Name="img" Source="{Binding Image}" Aspect="AspectFill" Margin="2" IsVisible="{Binding IsImage}">

</Image>

I am using above code to show image. Additionally, i want to show alternate text if image loading is failed.

Platform- Android

Answer 1

Hello,

MAUI Image control does not have this function, please add a feature request in the MAUI GitHub repro.

Here is a workaround, you can add Label and Image in the Grid like following layout. By default, the label's Text is null

<Grid>
<Label x:Name="loadFailedLabel"  HorizontalOptions="Center" VerticalOptions="Center"></Label>
  <Image
  Source="
https://aka.ms/campus1.jpg"
   x:Name="img"
  Loaded="Image_Loaded"
  HeightRequest="185"
  Aspect="AspectFit"
/>
  
</Grid>

When load failed, you get the null value from img.Source.GetPlatformImageAsync(Handler.MauiContext);, then you can set the Text to this Label.

private async void Image_Loaded(object sender, EventArgs e)
  {
      var res = await img.Source.GetPlatformImageAsync(Handler.MauiContext);
      if (res == null)
      {
          loadFailedLabel.Text="this is a Image but load Failed";
      }else{
          loadFailedLabel.Text="";
     }
  }

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.