Not all Images are loading in my View when using URI as source. RRS feed

  • Question

  • User191537 posted

    Hi All,

    I am using Xamarin.Forms, using MVVM. When I was building the View, I used images embedded in the App, using ImageSource.FromResource, and everything was fine, all of my images loaded correctly in the view. When I changed the source to use a URI from my local webserver, only the bottom 3 images load on the view.

    I have check that all of the images exist on the server, and that the URI sent to the image source in correct.

    I am not sure why only 3 images get loaded and the rest are blank.

    Here is my code:


    ``` private ObservableCollection _knownBirds { get; set; } public ObservableCollection KnownBirds { get { return _knownBirds; } set { _knownBirds = value; OnPropertyChanged("KnownBirds"); } }

    public KnownBirdsViewModel() { Title = "Known Birds"; KnownBirds = new ObservableCollection(); LoadKnownBirdsCommand = new Command(async () => await ExecuteLoadBirdsCommand()); }

    async Task ExecuteLoadBirdsCommand() { if (IsBusy) return;

    IsBusy = true;
        var _birds = await BirdService.GetKnownBirdsAsync();
        foreach (var tmpBird in _birds)
            KnownBird tmpKB = new KnownBird();
            tmpKB.BirdID = tmpBird.BirdID;
            tmpKB.Name = tmpBird.Name;
            tmpKB.examplePicture = tmpBird.examplePicture;
            //Change this to URL when setting this from the REST API and not the local data.
            //tmpKB.BirdImage = ImageSource.FromResource("BirdWatcherMobileApp.SampleData.images." + tmpBird.examplePicture);
            tmpKB.BirdImage = ImageSource.FromUri(new Uri("" + Settings.ServerAddress + "/images/bird_examples/" + tmpBird.examplePicture));
    catch (Exception ex)
        IsBusy = false;

    } ```


    <flv:FlowListView FlowColumnCount="3" HasUnevenRows="True" FlowItemsSource="{Binding KnownBirds, Mode=OneWay}" FlowItemTapped="FlowListView_FlowItemTapped" IsPullToRefreshEnabled="True" IsRefreshing="{Binding IsBusy, Mode=OneWay}" RefreshCommand="{Binding LoadKnownBirdsCommand}"> <flv:FlowListView.FlowColumnTemplate> <DataTemplate> <StackLayout Orientation="Vertical" Margin="10" HeightRequest="125"> <Image Source="{Binding BirdImage, Mode=OneWay}" HeightRequest="100" /> <Label Text="{Binding Name}" FontSize="16" HorizontalTextAlignment="Center" VerticalTextAlignment="Start" HorizontalOptions="CenterAndExpand" /> </StackLayout> </DataTemplate> </flv:FlowListView.FlowColumnTemplate> </flv:FlowListView>

    Right now I am thinking that loading the images from a webserver is taking time, and once the images are loaded into the Collection, and once the binding occurs the ListView ever updates the binding and the images are not loaded.

    I've read that when using an ObservableCollection, the OnPropertyChanged event is only fired when items are added or removed from the collection, and NOT when data inside an item is updated.

    I have that a BindingList collection will raise an OnPropertyChanged event when data inside an item in the list is updated. I've tried to swap out the ObservableCollection with a BindingList, but then noting is loaded into the view.

    I am not sure how to proceed here. Are my suspicions correct? Any help or information here would be greatly appreciated!!!!

    FYI I had to remove the H T T P part from the URI because it would not allow me to post the question.

    Friday, August 23, 2019 9:03 PM

All replies

  • User355485 posted

    check your BirdImage url when you are binding this.

    make sure your url is propery build

    Saturday, August 24, 2019 9:39 AM