Image Control Loses Image on Page Navigation in Android

[uSafi]

Description

In .NET MAUI, when using the Image control to display an image loaded from the Android Gallery using MediaPicker (or directly from a URL), the image disappears when navigating away from the page and then back again. The Source property of the Image control still holds the image source (i.e., it’s not null), but the Image control appears empty, and its size reverts to its initial state. This issue occurs on both a physical Android device and the Android emulator.

Steps to Reproduce

I created a reproduction project demonstrating this issue; the link can be found here.

Link to public reproduction project repository

https://github.com/uSafi/MauiAndroidImageNavigationBug

Version with bug

7.0.101

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

No response

Did you find any workaround?

A temporary workaround for this issue is to reset the BindingContext of the page in the OnAppearing method. Here’s an example:

object _viewModel;

public Page1()
{
	InitializeComponent();

    // Save the binding.
    _viewModel = BindingContext;
}

protected override void OnAppearing()
{
  base.OnAppearing();
  BindingContext = null;
  BindingContext = viewModel;
}

In this code, viewModel is the instance of your ViewModel that’s being used for data binding. This forces all bindings on the page to update, which causes the Image control to reload the image. However, this is not the most efficient solution, especially if there are many bindings or if the ViewModel is complex.

A more efficient solution is to reset the BindingContext of the Image control itself, if it is directly accessible in the ContentPage. Here’s an example:

object imageBinding;

public Page1()
{
    InitializeComponent();
    // Save the binding.
    
    imageBinding = AgentImage.BindingContext;
}

protected override void OnAppearing()
{
    base.OnAppearing();

    AgentImage.BindingContext = null;
    AgentImage.BindingContext = imageBinding;
}

In this code, AgentImage is the Image control. This forces the Image control to update its binding, which causes the image to be reloaded.

However, if the Image control is part of a ContentView or nested within other controls, accessing it directly from the ContentPage might not be straightforward. In such cases, you might need to traverse the visual tree or use other methods to access the Image control.

This issue might be a bug in .NET MAUI, and it would be great if the team could investigate it further. Thanks!

I hope this helps! Let me know if you need any further assistance.

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.

[XamlTest]

Verified this on Visual Studio Enterprise 17.8.0 Preview 7.0(8.0.0-rc.2.9373). Repro on Android 13.0-API33, not repro on Windows 11 with below Project:
MauiAndroidImageNavigationBug.zip

[shudson302]

I am having the same issue. Any update on when this will be fixed?

[Hrishikesh46779]

I also having the same issue.

#14205 (comment)