如何從api端點綁定到圖像？

Question

當前，我有一個應用程序要在其布局上顯示圖像縮略圖列表。

我能夠從api端點獲取json響應並將其反序列化。 現在，我有一個圖像對象，在該對象中，我有一個圖像預覽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

您的服務返回的列表的結構是什么？ 假設它是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>

Answer 2

您可以使用FFImageLoading與FlowListView

這將使您能夠從url，緩存和快速加載中加載圖像。

只需將其添加到您的DataTemplate並通過CachedImage Source屬性進行綁定

Source="{Binding url}"