[iOS] Images from paths refuse to load in UI

[zilvfes]

Description

Ever since .NET 7 loading images from local paths doesn't work with no clear errors. Tried .NET 8 as well as 8.0.5-preview.9748, 8.0.6-nightly.9839, but the issue remains. If I delete the app and reinstall it, sometimes it does load the images on first run and they work just fine, however after reloading the app it doesn't ever load the images in UI again, they do exist and load in view model just fine.

                    <CarouselView ItemsSource="{Binding Images, Mode=TwoWay}"
                                  IndicatorView="IndicatorView"
                                  HeightRequest="400"
                                  Margin="5,15,5,0">
                        <CarouselView.ItemTemplate>
                            <DataTemplate x:DataType="models:ImageData">
                                <StackLayout>
                                    <Label Text="{Binding Name.Value}" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" Margin="0,5"/>
                                    <Image Source="{Binding LocalPath}" VerticalOptions="CenterAndExpand">
                                        <Image.GestureRecognizers>
                                            <TapGestureRecognizer Command="{Binding Source={x:Reference CommentVw}, Path=OpenImageCommand}" CommandParameter="{Binding .}"/>
                                        </Image.GestureRecognizers>
                                    </Image>
                                </StackLayout>
                            </DataTemplate>
                        </CarouselView.ItemTemplate>
                    </CarouselView>

Steps to Reproduce

1. Download images from Backend save locally.
2. Try to load them in iOS.
3. No error just blank images.

Link to public reproduction project repository

No response

Version with bug

Nightly / CI build (Please specify exact version)

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

6.0

Affected platforms

iOS

Affected platform versions

iOS 17

Did you find any workaround?

Have not found anything that works.

Relevant log output

No response

[ajay-mundi]

I noticed a similar issue in a carousel with images. Some of my users experience it all the the time and for others it is sporadic. Most recently I started shrinking the images before displaying (the ones taken with a camera or selected from gallery - server ones come pre-shrunk), seems to work for now.

[ghost]

Hi @zilvfes. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

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.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback to reproduce the issue but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

[zilvfes]

While trying to create a repo that reproduces this issue I found a workaround so instead of repo here it is for anyone who needs this in the future.

Create a value converter that will take the string path of your image and returns ImageSource, I'm pretty sure Image should handle this automatically but it doesn't:

using System.Globalization;

namespace YourNameSpace;

public class ImageSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) => ImageSource.FromFile((string)value);

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) => value;
}

And then simply use it for source parameter of Image:

    <Image Source="{Binding LocalPath, Converter={StaticResource ImageSourceConverter}}" VerticalOptions="CenterAndExpand"/>

[ryanalford-suzy]

While trying to create a repo that reproduces this issue I found a workaround so instead of repo here it is for anyone who needs this in the future.

Create a value converter that will take the string path of your image and returns ImageSource, I'm pretty sure Image should handle this automatically but it doesn't:

using System.Globalization;

namespace YourNameSpace;

public class ImageSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) => ImageSource.FromFile((string)value);

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) => value;
}

And then simply use it for source parameter of Image:

    <Image Source="{Binding LocalPath, Converter={StaticResource ImageSourceConverter}}" VerticalOptions="CenterAndExpand"/>

Having the same issue as @ajay-mundi where images won't load in a CarouselView. Tried this workaround, but it didn't help.

More interestingly....setting a breakpoint in the converter does NOT get hit.

[jfversluis]

Can anyone (still) experiencing this share relevant code? Without it, it's pretty hard to diagnose what might be going on. Preferably a reproduction project so that we can see all the different moving parts.

Also, I would be very curious about the full path of the image that you are trying to use.

[ryanalford-suzy]

Can anyone (still) experiencing this share relevant code? Without it, it's pretty hard to diagnose what might be going on. Preferably a reproduction project so that we can see all the different moving parts.

Also, I would be very curious about the full path of the image that you are trying to use.

I'll see if I can make a repro project. I ended up changing how the view is designed in the carousel view and now it works(on iOS..but crashes on Android). I think I remember how I had it before.

[jfversluis]

@ryanalford-suzy were you able to make something for this?

[wyyqyl]

My iOS app encounters similar image display issues after reboots. Today, I discovered the root cause of the image display issue: the absolute file path was being stored using FileSystem.AppDataDirectory, which unfortunately changes after certain app reboots. Now I store relative path in my db, and everything works perfect.