Best way to display images using URL

I am developing an Android app which retrive PC's informations from a database, upload the relative images of the PC to the server and also get back the PC's URL of the images for displaying. Everything works like a charm, for all of the 3 part I use a WCF service, deployed on remote IIS server.

The images are stored in a server's virtual directory, so you can copy the URL and paste it in the browser and the image appear without problems.

As I use a dynamic view of the images, I implemented the method below for creating them:

private void DisplayAttechedIMages(List<string> list_images_url)
{
    for (int i = 0; i < list_images_url.Count; i++)
    {
        Image pic = new Image
        {
            HeightRequest = 250,
            WidthRequest = 150,
            Source = ImageSource.FromUri(new Uri(list_images_url[i])),
        };
    }
}

This is only the part where I create them, now I need to add them to a container, I tried to use Gridinside a ScrollView, but the result isn't good, because the visualization results with low performance (lagging, low response and bad resize).

Also I tried ViewCellinside TableView but the results are pretty the same.

This results could depend by the device?

So what is the best way to display image using the URLs?

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai

    Try to use the FFImageLoading library to load these images, it'll help you to load the images quickly.

    <ffimageloadingsvg:SvgCachedImage HeightRequest="100" Source="{Binding SvgString}"/>
    

    Check the link:
    https://github.com/luberda-molinet/FFImageLoading
    https://forums.xamarin.com/discussion/59244/lazy-loading-of-images-in-a-listview

  • aga913aga913 Member ✭✭

    Hi,
    I was just watching this video that talks about performance issues

    here are some tips i think you should consider:
    1. ListView should do the trick for you, it's way faster and it's easy to use
    2. you might as well use a foreach loop instead of the for(because it looks better ;) )
    3. try to Run Away from the hard coded sizes (referring to HeightRequest/WidthRequest) they will be a huge pain later on

        private void DisplayAttechedIMages(List<string> list_images_url)
        {
            foreach (string ImageURL in list_images_url)
            {
                Image pic = new Image
                {
                    HorizontalOptions = .... ,
                    VerticalOptions = .... ,
                    Source = ImageSource.FromUri(new Uri(ImageURL)),
                };
    
            }
        }
    
  • system_master98system_master98 Member ✭✭

    @aga913 I have problems to add an <ImageCell> to the <ListView> from the code behind, could you link some doc or examples?

  • aga913aga913 Member ✭✭
    Hi,
    You can create the listview from the XML code and add the items from the code behind...
    Here is a link on how to create it:
    https://github.com/willbuildapps/Xamarin.Forms-Xaml-Code-Reference/blob/master/ListView/ImageCell.md

    For the binding you have an Observablecollection called MyListView.itemSource you add your items to it there (link it with a list of items)
    Sorry if my answer was not enough I'm on my phone currently...😅
  • system_master98system_master98 Member ✭✭

    @aga913 This is a good idea, but I have to insert more than one image in the list view, I tried to use a grid, but the images do not appear

  • aga913aga913 Member ✭✭
    edited 8:15PM
    You can use a ViewCell then...
    All you do is set a DataTemplate and in it you put how do you want your Items to look like
    here is an example...


    <ListView>
    <ListView.ItemTemplate>
    <DataTemplate>
    <ViewCell>

    <!--Here You can put what each item in the ListView Will look Like-->
    <!--You can add Grid, StackLayout, etc. as you please-->

    <StackLayout VerticalOptions="Fill" BackgroundColor="Transparent" Padding="10">
    <Image x:Name="imgMain" Source="{Binding LVMainImage}" Aspect="AspectFill" WidthRequest="100" HeightRequest="135" VerticalOptions="Center" HorizontalOptions="FillAndExpand" />

    <Image x:Name="imgSub" Source="{Binding LVSubImage}" Aspect="AspectFit" WidthRequest="50"
    HeightRequest="75" VerticalOptions="End" HorizontalOptions="FillAndExpand" />
    <Label LineHeight="0.8" Text="{Binding Title}" VerticalTextAlignment="Start" TextColor="Black" FontSize="14"/>
    </StackLayout>

    </ViewCell>
    </DataTemplate>
    </ListView.ItemTemplate>
    </ListView>
Sign In or Register to comment.