Как привязать изображение к конечной точке API?

Question

В настоящее время у меня есть приложение, в котором я хочу отобразить список миниатюр изображений на моем макете.

Я могу получить ответ json от конечной точки API и десериализовать его. Теперь у меня есть объект изображения, и в этом объекте у меня есть URL предварительного просмотра изображения (уменьшенное изображение). У меня вопрос, как мне отобразить список миниатюр в моем макете?

Вот метод, который вызывается для отображения изображений и настройки некоторых свойств:

private List<string> images;
public List<string> Images
{
    get { return images; }
    set { SetProperty(ref images, value); }
}

private async Task DisplayImages()
{
    var imageObj = await _mediaService.GetCatImages();


   //imageObj.Hits[i].PreviewUrl; <-- how to a reference to the previewurl but what property should it bind to?

}

Вот мой макет на данный момент:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
             x:Class="MediaViewer.Views.ContentFolderMedia">

    <flv:FlowListView FlowColumnCount="3" SeparatorVisibility="None" HasUnevenRows="false"
            FlowItemTappedCommand="{Binding ItemTappedCommand}" FlowLastTappedItem="{Binding LastTappedItem}"
            FlowItemsSource="{Binding Images}" >

        <flv:FlowListView.FlowColumnTemplate>
            <DataTemplate>
                <Label HorizontalOptions="Fill" VerticalOptions="Fill" 
                XAlign="Center" YAlign="Center"/>
            </DataTemplate>
        </flv:FlowListView.FlowColumnTemplate>

    </flv:FlowListView>
</ContentPage>

Где макет должен выглядеть как галерея изображений (поэтому я использую эту стороннюю библиотеку: https://github.com/daniel-luberda/DLToolkit.Forms.Controls)

Итак, эта строка: FlowItemsSource="{Binding Images} должна быть там, где происходит привязка, но я не уверен, правильно ли установить свойство, чтобы оно связывалось с URL-адресом предварительного просмотра и отображало изображение. Это также заставляет меня задуматься ... обычно источник изображения - это имя локального изображения, но если я нажимаю ссылку, чтобы увидеть изображение, нужно ли выполнять какие-либо преобразования в моем приложении, чтобы отобразить изображение из ссылки?

Answer 1

Вы можете использовать FFImageLoading с FlowListView

Это даст вам возможность загружать изображения из URL, кэшировать и быстро загружать.

Просто добавьте его в DataTemplate и привяжите через свойство CachedImage Source

Source="{Binding url}"

Answer 2

Какова структура списка, возвращаемого вашим сервисом? Допустим, это List<ImageObj>.

Сначала вам нужно изменить тип изображения:

private List<ImageObj> images;
public List<ImageObj> Images
{
     get { return images; }
     private set { SetProperty(ref images, value); }
}

private async Task DisplayImages()
{
    Images = await _mediaService.GetCatImages()
                                .Select(x => x.Hit)
                                .ToList();
}

Тогда вы правильно связали свой список с Listview. Теперь в пределах DataTemplate вам нужно добавить изображение, привязанное к URL:

<DataTemplate>
    <Image Source="{Binding PreviewUrl}" />
</DatatTemplate>