How do I bind to an image from an api endpoint?


How do I bind to an image from an api endpoint?



Currently, I have an app where I want to display a list of image thumbnails on my layout.



I'm able to get the json response from the api endpoint and deserialize it. Now, I have an image object and in that object, I have an image preview url (the thumbnail image). My question is how do I display a list of thumbnail images in my layout?



Here's the method that gets called to display images and some property setup:


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?

}



Here's my layout at the moment:


<?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>



Where the layout should look like an image gallery (hence why I'm using this third party library: https://github.com/daniel-luberda/DLToolkit.Forms.Controls)



So, this line: FlowItemsSource="{Binding Images} should be where the binding occurs but I'm not sure to properly set the property so that it binds to the preview url and displays the image. It also makes me think... usually an image source is a name of a local image but if I'm hitting a url to see an image, do I need to do any conversion in my app to display the image from a url?


FlowItemsSource="{Binding Images}




2 Answers
2



What is the structure of the list returned by your service? Let's say it is List<ImageObj>.


List<ImageObj



First you need to change your Images type:


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();
}



Then you've correctly bound your list to your Listview.
Now within the DataTemplate you need to add an Image bound to the url:


Listview


DataTemplate


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





what is url in this case however? How can I make it it's tied with previewUrl above?
– Euridice01
Jun 30 at 0:46





I edited the answer. I'm on mobile, not easy to write code though.
– François
Jun 30 at 0:54





Thanks! It works, just the images are really slow to load up. I think maybe I should look into TheGeneral's advice about FFImageLoading. Thanks!
– Euridice01
Jun 30 at 1:00




You can use FFImageLoading with a FlowListView


FFImageLoading


FlowListView



This will give you the ability to load the image from a url, caching, and fast loading.



Just add it to your DataTemplate and bind via the CachedImage Source property


DataTemplate


CachedImage


Source


Source="{Binding url}"





Sorry to bother again but do you know how to set the height of the image for FlowListView? I can't seem to set it to a particular height? The images are appearing small. Thanks!
– Euridice01
Jun 30 at 1:26





@Euridice01 HeightRequest and WidthRequest
– TheGeneral
Jun 30 at 1:27


HeightRequest


WidthRequest





ok let me try again. I tried a MinimumHeightRequest but it wasn't taking. Thanks!
– Euridice01
Jun 30 at 1:28






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Post a Comment

Popular posts from this blog

paramiko-expect timeout is happening after executing the command

paramiko-expect timeout is happening after executing the command Can someone help me why timeout is happening after executing the command .I am trying to SSH to a machine and execute a command.I want to store the result of the executed command . I have referred paramiko-timeout but i didn't get my expected result. import traceback try: import paramiko except ImportError: raise Exception("Please install paramiko , pip install paramiko") import pexpect from paramiko_expect import SSHClientInteraction def main(): HOSTNAME = "minion5.net" USERNAME = "root" PASSWORD = "help@432" PROMPT = "root@*:~$s+" try: client = paramiko.SSHClient() client.load_system_host_keys() client.set_missing_host_key_policy(paramiko.AutoAddPolicy()) client.connect(hostname=HOSTNAME, username=USERNAME, password=PASSWORD) with SSHClientInteraction(client, timeout=20, display=True) as interact: ...
Read more

Export result set on Dbeaver to CSV

Export result set on Dbeaver to CSV Normally I use Dbeaver for windows and always export my result set like this: run my query --> select the result --> export the result set --> select export to clipboard --> done This step by step puts my result set in my clipboard and I can paste it wherever I want to work with it. The problem is that now I am using dbeaver for mac and this guide is not working. I can go on until the moment that I select my result set like in the image below: exporting data set But once I go further in the process, in the last step I get: no query Note that in "source" it was suppose to show the query that originated the result set, but instead it says just "select. As a result it does't select my result or anything (besides being "successful"). Normally my query would show up there automatically and I couldn't find any option that corrects this problem in the menus. Please help me! Thanks. Aft...
Read more

Opening a url is failing in Swift

Opening a url is failing in Swift breakpointing inside the callback and logging success shows false. I added itms-apps to my plist: LSApplicationQueriesSchemes and put this in my app delegate: func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool { return true } func moreTapped() { let url = NSURL(string: "itms-apps://itunes.com/developer/quantum-productions/id979315877") if #available(iOS 10.0, *) { UIApplication.shared.open(url! as URL, options: [:], completionHandler: {(success: Bool) in }) } else { UIApplication.shared.openURL(url! as URL) } } Are you testing on a real device? – rmaddy Jun 21 at 23:57 I try on a device, get "Cannot Connect to App Store". Device is online ...
Read more