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?

Answer 1

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.

Answer 2

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