Лучший способ получить несколько изображений из .net Web API и заполнить их в форме Xamarin

Question

Это код, который я использую для получения одного изображения. Этот код работает в цикле, чтобы заполнить изображение и работает. Но иногда, если есть задержка в получении изображения. Приложение застревает в заполнении данных

            var resp = await Client.GetAsync(imageUrl);
            if (resp.IsSuccessStatusCode)
            {
                imageData = await resp.Content.ReadAsByteArrayAsync();
            }

Это цикл, который вызывает загрузку изображений отдельных продуктов:

 List<Task> tasks = new List<Task>();
            foreach (var product in productsList)
            {
                var task = DownloadImage(eImageType.Brand, product);
                tasks.Add(task);
            }

код для динамического построения объекта изображения

        foreach(var brand in brands)
        {
            brand.ImageSource = ImageSource.FromStream(() =>
            {
                if (brand.ImageData != null)
                    return new MemoryStream(brand.ImageData);
                else
                    return null;
            });
        }

Код для отображения вида изображения в XAMLS

              <AbsoluteLayout>
                                            <ffimage:CachedImage Source="blugegb" HorizontalOptions="Fill"
                                                   DownsampleWidth="180"
                                                   DownsampleUseDipUnits="True"
                                                   AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All"
                                                       VerticalOptions="Fill"
                                                       Aspect="AspectFill"/>
                                            <ffimage:CachedImage Source="{Binding ImageSource}" HorizontalOptions="Fill"
                                                                 DownsampleWidth="100"
                                                                 DownsampleUseDipUnits="True"
                                                   AbsoluteLayout.LayoutBounds=".5,.5,.8,.8" AbsoluteLayout.LayoutFlags="All"
                                                       VerticalOptions="Fill"
                                                       Aspect="AspectFit"/>
                                        </AbsoluteLayout>

Answer 1

если вы используете FFImageLoading, все очень просто:

  <ffimage:CachedImage Source="{Binding ImageSource}" HorizontalOptions="Fill"
                                                             DownsampleWidth="100"
                                                             DownsampleUseDipUnits="True"
                                               AbsoluteLayout.LayoutBounds=".5,.5,.8,.8" AbsoluteLayout.LayoutFlags="All"
                                                   VerticalOptions="Fill"
                                                   Aspect="AspectFit"/>

Укажите привязку к CachedImage в его источнике, затем напрямую передайте URL-адрес в качестве привязки к источнику, например:

public string ImageSource {get; set;}
//SomeWhere in your code 
ImageSource="https://images.pexels.com/photos/807598/pexels-photo-807598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940/abcd.jpg";

Answer 2

На мой взгляд, лучший способ - возвращать файлы как URL, а не как поток.

Пример:

1. Загрузите ваши изображения, скажем, в хранилище Azure BLOB
2. Создать таблицу с информацией о файлах (или сохранить метаданные с файлом)

3. В вашей сборке и действии API .NET web, которая запрашивает все ваши файлы.

4. Убедитесь, что запрос возвращает JSON, который имеет результат, по крайней мере, такой:

   { name: 'test', url: 'http://yourpathtoyourimage.com/test.png' }
   

5. В приложении Xamarin используйте плагин или пользовательскую логику для отображения изображений, используя их URL:

   <Image Height="100" Width="100" Margin="12,0,9,0">
     <Image.Source>
       <BitmapImage UriSource="{Binding Url}" CreateOptions="BackgroundCreation"/>
     </Image.Source>
   </Image>