[iOS] Images in CollectionView are not getting loaded correctly the first time, until you scroll the list or click [Back] and open the page again

[minglu]

Description

I am not sure if it's an image cache issue or a CollectionView display issue. It works fine on android but not iOS. I have an attachment page showing all photos in CollectionView GridItemsLayout, use remote URLs as image sources, but somehow it couldn't get loaded correctly the first time, You can see the correct grid blank area (you can click it to open in the browser without issue). If you scroll the list up and down or click [Back] and open the page again with the same URLs, all images would be loaded correctly going forward.

Steps to Reproduce

1. Check out https://github.com/minglu/iOSCollectionViewImageTest
2. Build and Run, Click [Images in CollectionView] button on main page
3. It will open another page with 6 images (source url to a google logo image) in Collectionview GridItemsLayout, but it's not loaded at the first time without any error messages, no matter how long you wait. You can click the blank area, it will correctly open the image in the browser.
4. Click back and click the button to open the page again, all images are correctly loaded. (or scroll the list, might need to add more images if the list is not long enough on your screen, those images which got scrolled away will display correctly when you scroll back)

   <CollectionView
        x:Name="PhotoList"
        ItemsSource="{Binding PhotoUrls}"
        SelectionChanged="PhotoList_SelectionChanged"
        SelectionMode="Single">
        <CollectionView.ItemsLayout>
            <GridItemsLayout
                HorizontalItemSpacing="2"
                Orientation="Vertical"
                Span="2"
                VerticalItemSpacing="1" />
        </CollectionView.ItemsLayout>

        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="5">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image
                        Grid.Row="0"
                        Grid.Column="0"                       
                        Aspect="AspectFit"
                        BindingContext="{Binding .}"
                        HeightRequest="150"
                        HorizontalOptions="Center"                   
                        Source="{Binding .}"
                        VerticalOptions="Start" />

                    <Label
                        Grid.Row="1"
                        Grid.Column="0"
                        Padding="5,1"
                        FontAttributes="Italic"
                        FontSize="10"
                        HorizontalOptions="CenterAndExpand"
                        LineBreakMode="TailTruncation"
                        Text="Image ID here"
                        VerticalOptions="End" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>

    </CollectionView>

List<string> urls = new List<string>()
            {
                "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/220px-Google_Images_2015_logo.svg.png",
                "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/220px-Google_Images_2015_logo.svg.png",
                "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/220px-Google_Images_2015_logo.svg.png",
                "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/220px-Google_Images_2015_logo.svg.png",
                "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/220px-Google_Images_2015_logo.svg.png",
                "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/220px-Google_Images_2015_logo.svg.png",
            };

            PhotoUrls = new ObservableCollection<string>(urls);

Link to public reproduction project repository

https://github.com/minglu/iOSCollectionViewImageTest

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16.3

Did you find any workaround?

No

Relevant log output

No response

[mattleibow]

Probably a duplicate of #12080 - related to the fact that after the images are loaded, the layout is not refreshed.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[XamlTest]

Verified this on Visual Studio Enterprise 17.7.0 Preview 2.0. Repro on iOS 16.4 with below Project: iOSCollectionViewImageTest.zip

[karthikraja-arumugam]

Probably a duplicate of #12080 - related to the fact that after the images are loaded, the layout is not refreshed.

@mattleibow - do we have any workaround for this, I'm facing the same issue while loading Image inside StackLayout

 <StackLayout>
        <Image  Source="{Binding ImageSource}"/>
</StackLayout>

[minglu]

Any updates. or will it be fixed in 8.0?