CollectionView API image

Question

For some reason my colletionView doesn't want to show the images

   <CollectionView
            Grid.Row="2"
            Margin="20"
            HorizontalOptions="CenterAndExpand"
            ItemsSource="{x:Binding SelectedTurbine.ImagesURL}">
            <CollectionView.ItemsLayout>
                <LinearItemsLayout
                    ItemSpacing="5"
                    Orientation="Horizontal" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Image
                        HeightRequest="80"
                        Source="{x:Binding .}"
                        WidthRequest="80" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

And I am sure that my images cololectionview has the images, well at least the urls, and I put the URL directly I can see it

you can use this for testing

https://metrowindstorage.blob.core.windows.net/ecuador/charge_station.png

look

https://reccloud.com/u/2qwabpj

I load things here

 async Task LoadOrInitializeTurbineAsync() {
     var turbinesRef = _firestoreDb!.Collection(collectionName);
     var snapshot = await turbinesRef.GetSnapshotAsync();

     if (snapshot.Count == 0) {
         var turbine = new Turbine {
             Id = "EC-G-SB",
             Country = "Ecuador",
             Name = "Estación Ciudadela Simón Bolívar",
             Address = "Av. de las Américas, Guayaquil 090513, Ecuador",
             Latitude = -2.151993,
             Longitude = -79.886109,
             InstalationDateTime = new DateTime(2024, 8, 2, 0, 0, 0, DateTimeKind.Utc),
             ImagesURL = [],
         };

         turbine.RemovedCo2Kilograms = Math.Round(turbine.EnergyProduced * turbine.Co2EmissionOffset, 5);

         await AddTurbineImages(turbine);

         var turbineDocRef = turbinesRef.Document(turbine.Id);

         await turbineDocRef.SetAsync(turbine);
         // Add to observable collection if necessary
         AddToObservable(turbine);
     }
     else {
         foreach (var document in snapshot.Documents) {
             var turbine = document.ConvertTo<Turbine>();
             turbine.Id = document.Id;
             await AddTurbineImages(turbine);
             AddToObservable(turbine);
         }
     }
 }

 private async Task AddTurbineImages(Turbine turbine) {

     turbine.ImagesURL!.Clear();

     var containerClient = _blobServiceClient.GetBlobContainerClient(turbine.Country!.ToLower());
     await foreach (var item in containerClient.GetBlobsAsync()) {
         var blobClient = containerClient.GetBlobClient(item.Name);
         turbine.ImagesURL!.Add(blobClient.Uri.ToString());
     }
 }

I created this for debus purpoises So, I do not understand why

 <Grid
     RowDefinitions="Auto,Auto,*,*"
     RowSpacing="5">

     <Label
         Padding="0,30,0,0"
         FontAttributes="Bold"
         HorizontalTextAlignment="Center"
         Text="{x:Binding SelectedTurbine.Turbine.Name}"
         VerticalOptions="Center" />

     <Label
         Grid.Row="1"
         HorizontalTextAlignment="Center"
         Text="{x:Binding SelectedTurbine.Turbine.Address}"
         VerticalOptions="Center" />

     <Grid
         Grid.Row="2"
         Margin="2"
         Padding="10"
         ColumnDefinitions="*,*"
         ColumnSpacing="2"
         HorizontalOptions="Center"
         RowDefinitions="*,*,*,*,*"
         RowSpacing="2">

         <Border>
             <Label
                 Padding="10"
                 FontAttributes="Bold"
                 Text="{x:Static rex:AppResource.TurbineInstalationDateTime}"
                 VerticalOptions="Center" />
         </Border>

         <Border Grid.Row="1">
             <Label
                 Padding="10"
                 FontAttributes="Bold"
                 Text="{x:Static rex:AppResource.TubinePower}"
                 VerticalOptions="Center" />
         </Border>

         <Border Grid.Row="2">
             <Label
                 Padding="10"
                 FontAttributes="Bold"
                 Text="{x:Static rex:AppResource.TurbineCapacity}"
                 VerticalOptions="Center" />
         </Border>

         <Border Grid.Row="3">
             <Label
                 Padding="10"
                 FontAttributes="Bold"
                 Text="{x:Static rex:AppResource.TurbineEmission}"
                 VerticalOptions="Center" />
         </Border>

         <Border Grid.Row="4">
             <Label
                 Padding="10"
                 FontAttributes="Bold"
                 Text="{x:Static rex:AppResource.TurbineCarbonRemoval}"
                 VerticalOptions="Center" />
         </Border>

         <Border Grid.Column="1">
             <Label
                 Padding="10"
                 FontAttributes="Bold"
                 Text="{x:Binding SelectedTurbine.Turbine.StringifyInstalationDate}"
                 VerticalOptions="Center" />
         </Border>

         <Border
             Grid.Row="1"
             Grid.Column="1">
             <Label
                 Padding="10"
                 FontAttributes="Bold"
                 Text="{x:Binding SelectedTurbine.Turbine.Power,
                                  StringFormat='{0} kW'}"
                 VerticalOptions="Center" />
         </Border>

         <Border
             Grid.Row="2"
             Grid.Column="1">
             <Label
                 Padding="10"
                 FontAttributes="Bold"
                 Text="{x:Binding SelectedTurbine.Turbine.CapacityFactor}"
                 VerticalOptions="Center" />
         </Border>

         <Border
             Grid.Row="3"
             Grid.Column="1">
             <Label
                 Padding="10"
                 FontAttributes="Bold"
                 Text="{x:Binding SelectedTurbine.Turbine.Co2EmissionOffset,
                                  StringFormat='{0} kg CO₂/kWh'}"
                 VerticalOptions="Center" />
         </Border>

         <Border
             Grid.Row="4"
             Grid.Column="1">
             <Label
                 Padding="10,0,0,0"
                 FontAttributes="Bold"
                 FontSize="Medium"
                 Text="{x:Binding SelectedTurbine.Turbine.FinalCo2Removed,
                                  StringFormat='{0} kg CO₂'}"
                 VerticalOptions="Center" />
         </Border>
     </Grid>

     <CollectionView
         Grid.Row="3"
         Margin="20"
         HorizontalOptions="CenterAndExpand"
         ItemsSource="{x:Binding SelectedTurbine.Turbine.ImagesURL}">
         <CollectionView.ItemsLayout>
             <LinearItemsLayout
                 ItemSpacing="5"
                 Orientation="Horizontal" />
         </CollectionView.ItemsLayout>

         <CollectionView.ItemTemplate>
             <DataTemplate>
                 <Image
                     HeightRequest="300"
                     Source="{x:Binding .,
                                        TargetNullValue=no_image.png}"
                     WidthRequest="300" />
             </DataTemplate>
         </CollectionView.ItemTemplate>

     </CollectionView>
 </Grid>

        void OnPinMarkerClicked(object turbine)
        {
            if (turbine != null)
            {
                // Handle the pin click event
                Shell.Current.GoToAsync($"{nameof(TurbineDetailPage)}",
                    true,
                    new Dictionary<string, object> {
                    { "SelectedTurbine", turbine }
                });
            };
        }
    }
}

.Net 9

Windows, Android