After installing FFImageLoading images don't show at all

Question

My Xamarin Forms 5 app will allow users to upload their own images which can be large. I noticed that large images were taking a long time to show so I installed FFImageLoading and followed the instructions on their Github page at https://github.com/luberda-molinet/FFImageLoading/wiki/Xamarin.Forms-API.

Specifically, I installed the following packages:

Xamarin.FFImageLoading Version="2.4.11.982"
Xamarin.FFImageLoading.Forms Version="2.4.11.982"
Xamarin.FFImageLoading.Svg.Forms Version="2.4.11.982"
Xamarin.FFImageLoading.Transformations Version="2.4.11.982"

I also initialized it as follows:

Under Android, in OnCreate method of MainActivity.cs, I added FFImageLoading.Forms.Platform.CachedImageRenderer.Init(enableFastRenderer:true); AND FFImageLoading.Forms.Platform.CachedImageRenderer.InitImageViewHandler();
Under iOS, in FinishedLaunching() method of AppDelegate.cs, I added FFImageLoading.Forms.Platform.CachedImageRenderer.Init(); AND FFImageLoading.Forms.Platform.CachedImageRenderer.InitImageSourceHandler();

I first tried it without changing anything in my XAML files, meaning I used the regular Image control and images would NOT show at all.

I then tried the following and I see NOTHING at all:

...
xmlns:ffil="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
...
<ffil:CachedImage
   Source="{Binding FileUrl}"
   DownsampleWidth="150"
   DownsampleToViewSize="True"/>

IMPORTANT:

I also want to mention that the images are displayed within CollectionView controls AND in all cases, their source is a URL and NOT a local path.

Any idea what maybe the issue here and how to fix it?

Try to set a fixed width and height. – alexgavru May 04 '22 at 08:23 — alexgavru, May 04 '22 at 08:23

score 2 · Accepted Answer · answered May 04 '22 at 13:45

As I'm aware FFImageLoading is not maintained anymore. A lot of apps are still using the package but keep in mind that reported open issues will most likely not be fixed. It is sad because this is one of the most popular packages for Xamarin Forms, but it looks like we will have to start looking for alternatives.

Good luck with this.

Alexandar May - MSFT · Answer 2 · 2022-05-04T06:07:31.210

I checked your steps that you followed the instructions.Obviously,your steps are correct and I manage to display the image{using URL} with CollectionView as you said,hope it can give you some insights.

Model: MyModel.cs

    public class MyModel
    {
       public int id { get; set; }
       public string FileUrl { get; set; }
    }

View: MainPage.xaml

<CollectionView ItemsSource="{Binding MyModels}">
    <CollectionView.ItemsLayout>
           <GridItemsLayout Orientation="Vertical" Span="2" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <ContentView Padding="0">
                <ffil:CachedImage
                        Source="{Binding FileUrl}"
                        DownsampleWidth="150"
                        DownsampleToViewSize="True"/>
            </ContentView>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Bind the ViewModel in backend:

BindingContext = new MainPageViewModel();

ViewModel: MainPageViewModel.cs

    public class MainPageViewModel : INotifyPropertyChanged
   {
        public event PropertyChangedEventHandler PropertyChanged;

        private ObservableCollection<MyModel> myModels;
        public ObservableCollection<MyModel> MyModels
       {
           get { return myModels; }
           set { myModels = value; }
        }
        public MainPageViewModel()
       {
           MyModels = new ObservableCollection<MyModel>
          {
            new MyModel{id = 1, FileUrl = "http://loremflickr.com/600/600/nature?filename=simple.jpg"},
            new MyModel{id = 2, FileUrl ="http://loremflickr.com/600/600/nature?filename=simple.jpg"},
            new MyModel{id = 3, FileUrl = "http://loremflickr.com/600/600/nature?filename=simple.jpg"},
            new MyModel{id = 4, FileUrl ="http://loremflickr.com/600/600/nature?filename=simple.jpg"},
            new MyModel{id = 5, FileUrl = "http://loremflickr.com/600/600/nature?filename=simple.jpg"},
            new MyModel{id = 6, FileUrl ="http://loremflickr.com/600/600/nature?filename=simple.jpg"}
          };
       }
   }

Update: In Android, it works well.However,in iOS there's already a reported issue: github.com/luberda-molinet/FFImageLoading/issues/1498

Thank you but I'm still kind of lost here. All I can say is that things are "slightly" better on Android. So far, all I'm seeing is that `FFImageLoading` has made it even slower than before to load images on Android. On iOS, nothing works at all. No images are downloaded if they're within `CollectionView`. I'm thinking about uninstalling `FFImageLoading` and going back to dealing with slow image load times. — Sam, May 04 '22 at 04:53
Thanks for your response! In iOS, there's already a reported issue:https://github.com/luberda-molinet/FFImageLoading/issues/1498 , Looks like this hasn't been fixed. — Alexandar May - MSFT, May 04 '22 at 05:47
At this point, I’m abandoning `FFImageLoading`. Thank you for trying to help. — Sam, May 05 '22 at 04:54

After installing FFImageLoading images don't show at all

2 Answers2