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?

Best Answer

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

    @system_master98
    How did it turn out did it work for you ?
    if you need more info you can refer to this link.
    it mentions about how to create it in the code behind and a lot more...

Sign In or Register to comment.