[Android] Image can disappear when going back to the page.

[ziomek64]

Description

First things first please rename the title of this issue to the more correct one as I didn't know how to title it.

I'm experiencing a problem, might be xaml or shell related. The images dissapear when moving between tabs. If I have Image with its source set on the page on the moment the app is building and debugging it will stay there when changing tabs but when Image is loaded on runtime like when I pull data from API (being binded), (Or add image url in xaml and hot reload) it will dissapear when changing tabs.

When I switched .net run time for all platforms from .net 7 to .net 6 it seems to fix it so the issue might be related to that somehow? That's the only discovery I've made so far. Also this issue doesn't seem to persist on other platforms at least it doesn't on Windows. I don't have any apple devices.

Video shows that when adding an image before hand works fine when switching tabs. But there is a bug when adding an image in runtime. This doesn't happen on .net 6.

2023-03-24_09-20-38.mp4

Steps to Reproduce

1. Make fresh project
2. Try to add picture on runtime and switch tabs.

Link to public reproduction project repository

https://github.com/ziomek64/TabBarPhotoTest

Version with bug

7.0 (current)

Last version that worked well

6.0.424

Affected platforms

Android

Affected platform versions

Android

Did you find any workaround?

Use maui on .net 6

Relevant log output

No response

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[janseris]

Isn't this XAML Hot Reload issue?

[ziomek64]

Isn't this XAML Hot Reload issue?

I don't think so, because this happens when I have image source binded. When I pull data it works fine, but If I go from this page and come back the image is not there. But when a new image with new source is loaded it again works until I leave the page

[kirakosyan]

DevEx claims that the bug in their control is related to this. Information in the discussion can be useful
https://supportcenter.devexpress.com/ticket/details/t1155623/dxcollectionview-does-not-show-images-in-its-items-when-its-parent-tab-is-switched

[mtmgoliath]

I have managed to find a work-around.

I seems that when setting the URL to just a string property in the VM and binding the Image Source to it then the image disappears.

Instead set/bind to a property inside an object in the VM.

   //Create separate model
  public class Banner
  {
      public string Image { get; set; }
      public string Text { get; set; }
  }
  
  //In the VM create property for object
  public Banner HeadlineBanner { get; set; }
  
  
  //Then in the VM set properties on page appearing event
  [RelayCommand]
  public async void PageAppearing()
  {
      try
      {
          await Task.Run(async () =>
          {
              //Get details from api service
              var headlineBanner = new HeadlineBanner();
              headlineBanner.Image = _apiService.ImageUrl;
              headlineBanner.Text = _apiService.Text;
            
              //Set the object
              HeadlineBanner = headlineBanner;
          });

      }
      catch (Exception ex)
      {
          Crashes.TrackError(ex);
      }
  }

Then in the view bind to object's properties

<Image Source="{Binding HeadlineBanner.Image}" />
<Label Text="{Binding HeadlineBanner.Text}" />

I also found that I was having trouble if binding to a ContentView, instead of directly writing out the layout in the View.

Hopefully this helps get your app out the door!

[ziomek64]

I have managed to find a work-around.

I seems that when setting the URL to just a string property in the VM and binding the Image Source to it then the image disappears.

Instead set/bind to a property inside an object in the VM.

   //Create separate model
  public class Banner
  {
      public string Image { get; set; }
      public string Text { get; set; }
  }
  
  //In the VM create property for object
  public Banner HeadlineBanner { get; set; }
  
  
  //Then in the VM set properties on page appearing event
  [RelayCommand]
  public async void PageAppearing()
  {
      try
      {
          await Task.Run(async () =>
          {
              //Get details from api service
              var headlineBanner = new HeadlineBanner();
              headlineBanner.Image = _apiService.ImageUrl;
              headlineBanner.Text = _apiService.Text;
            
              //Set the object
              HeadlineBanner = headlineBanner;
          });

      }
      catch (Exception ex)
      {
          Crashes.TrackError(ex);
      }
  }

Then in the view bind to object's properties

<Image Source="{Binding HeadlineBanner.Image}" />
<Label Text="{Binding HeadlineBanner.Text}" />

I also found that I was having trouble if binding to a ContentView, instead of directly writing out the layout in the View.

Hopefully this helps get your app out the door!

I honestly would prefer to stay at .net 6 and wait for the fix as I have too much to change. But somebody will use it for sure. I don't need it as I didn't use any new features from 7

[ziomek64]

I have managed to find a work-around.

I seems that when setting the URL to just a string property in the VM and binding the Image Source to it then the image disappears.

Instead set/bind to a property inside an object in the VM.

   //Create separate model
  public class Banner
  {
      public string Image { get; set; }
      public string Text { get; set; }
  }
  
  //In the VM create property for object
  public Banner HeadlineBanner { get; set; }
  
  
  //Then in the VM set properties on page appearing event
  [RelayCommand]
  public async void PageAppearing()
  {
      try
      {
          await Task.Run(async () =>
          {
              //Get details from api service
              var headlineBanner = new HeadlineBanner();
              headlineBanner.Image = _apiService.ImageUrl;
              headlineBanner.Text = _apiService.Text;
            
              //Set the object
              HeadlineBanner = headlineBanner;
          });

      }
      catch (Exception ex)
      {
          Crashes.TrackError(ex);
      }
  }

Then in the view bind to object's properties

<Image Source="{Binding HeadlineBanner.Image}" />
<Label Text="{Binding HeadlineBanner.Text}" />

I also found that I was having trouble if binding to a ContentView, instead of directly writing out the layout in the View.

Hopefully this helps get your app out the door!

I honestly don't know how do they expect people to update to newer version when bugs like that make it impossible to use maui

[drasticactions]

I removed the Hot-Reload-Xaml tag, #14471 (comment)

This is not a Hot Reload bug.

[drasticactions]

@ziomek64 I've tried reproducing this with your sample project, and in the MAUI repo, in code and with XAML Hot Reload, and it works every time. If I set it so the image loads dynamically, or through a binding, it stays loaded when switching tabs.

Can you create an example, in code, where this happens?

[ghost]

Hi @ziomek64. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ziomek64]

I updated repro repo https://github.com/ziomek64/TabBarPhotoTest to contain a real world sceneario. On the first page just pull down to refresh to change avatar and banner, then go to second page and come back. Both images are gone. Same on debug and release.

2023-05-09.17-35-46.mp4

[sellotape]

A slightly easier - though inspired by - workaround to @ziomek64's above:

It seems triggering a property-changed event on the property that the image Source is bound to is sufficient. Add this to your view model (or to a base of it to use it more widely):

#if ANDROID
public void Github14471Hack(string propertyName) => OnPropertyChanged(propertyName);
#endif

(I'm assuming you're using CommunityToolkit.Mvvm here; if not, fire the INotifyPropertyChanged.PropertyChanged event however you do currently).

In your page code-behind, initialize a _viewModel field in the constructor and override OnAppearing in your page:

#if ANDROID
protected override void OnAppearing()
{
    _viewModel.Github14471Hack(nameof(_viewModel.ImageUrl)); // Or whatever "ImageUrl" is for you.
    base.OnAppearing();
}
#endif

If you have a large image with controls overlaying it you will potentially see a flicker, but at the moment it's less of an evil than the image disappearing.

[oscore-john]

I am experiencing this too. I have tried both of the above workarounds, no joy.

I notice that it happens only with jpg but not with png. (actually, don't want to give bum steer. better to say: if happens consistently with jpg files loaded from an AWS s3 bucket, but not with this png: https://icons.veryicon.com/png/Movie%20%26%20TV/Danger%20Mouse/Danger%20Mouse%20In%20A%20Pickle.png

[oscore-john]

I found a workaround which did work for me.

[thomasgalliker]

@samhouts may I ask you to reevaluate the priority of this bug? We've migrated a huge app from Xamarin Froms to .NET 8 and now we see that Images disappear on Android - exactly what many other people described here. I run out of arguments to stay with MAUI. It's in your hands now.

[samhouts]

@thomasgalliker Thank you for pinging me! I missed the notifications for the many replies to this issue! You're all absolutely right: this is a migration blocking issue, and it should be a high priority for us to fix. I'll remove the p/2 tag, and we'll do our best to get this scheduled as soon as we can.

[ziomek64]

@thomasgalliker Thank you for pinging me! I missed the notifications for the many replies to this issue! You're all absolutely right: this is a migration blocking issue, and it should be a high priority for us to fix. I'll remove the p/2 tag, and we'll do our best to get this scheduled as soon as we can.

How the F you haven't noticed it for a year that's important issue is beyond me XDDD

[thomasgalliker]

@samhouts thanks for taking this to the top end of the todo list 👍🏻 Much appreciated! I think there are a couple of other maui issues related to exactly this issue.

[ziomek64]

This will make it in .net 8?

[devMotcho]

After many hours i found a Solution for this by using Caching the others didnt work on my case:

1. Adding FFImageLoading.Maui to your project;
2. Initializing it on builder at MauiProgram.cs:

builder
    .UseMauiApp<App>()
    .UseFFImageLoading()

3. Adding the namespace to the Page where we want to render the image
   xmlns:ff="clr-namespace:FFImageLoading.Maui;assembly=FFImageLoading.Maui"

4. Now we can use ff:CachedImage instead of Image

<ff:CachedImage
    Source="your_image.png"
    CacheDuration="1"
    RetryCount="3"
    RetryDelay="600"
    DownsampleToViewSize="True" />

CacheDuration="1": Cache the image for 1 day.
RetryCount="3" and RetryDelay="600": Retry loading 3 times with a 600ms delay if it fails.
DownsampleToViewSize="True": Resize the image to fit the view, saving memory.

Enjoy. Stay positive!

[ziomek64]

After many hours i found a Solution for this by using Caching the others didnt work on my case:

1. Adding FFImageLoading.Maui to your project;
2. Initializing it on builder at MauiProgram.cs:

builder
    .UseMauiApp<App>()
    .UseFFImageLoading()

3. Adding the namespace to the Page where we want to render the image
   xmlns:ff="clr-namespace:FFImageLoading.Maui;assembly=FFImageLoading.Maui"

4. Now we can use ff:CachedImage instead of Image

<ff:CachedImage
    Source="your_image.png"
    CacheDuration="1"
    RetryCount="3"
    RetryDelay="600"
    DownsampleToViewSize="True" />

CacheDuration="1": Cache the image for 1 day.
RetryCount="3" and RetryDelay="600": Retry loading 3 times with a 600ms delay if it fails.
DownsampleToViewSize="True": Resize the image to fit the view, saving memory.

Enjoy. Stay positive!

This is fixed though in newest Maui XDDD

[devMotcho]

Well i had a problem in my app where in a Page i have 2 ObservableCollections Category and Product and a DishOfTheDay Dish all the images from the Observables had no bug but the DishOfTheDay image when changing tabs and coming back wasnt rendered anymore it would be render only if refresh the page (calling api again)

[ziomek64]

Well i had a problem in my app where in a Page i have 2 ObservableCollections Category and Product and a DishOfTheDay Dish all the images from the Observables had no bug but the DishOfTheDay image when changing tabs and coming back wasnt rendered anymore it would be render only if refresh the page (calling api again)

Use newest Maui. No need to install packages