Skip to content



The control is used to display images.


Note that you will need to put the image into each platform.

<Image Source="logo" />

The logo.png image was added to the Android drawable folder and on iOS into the Assets.xcassets folder.

In Code

Local image

var localImage = new Image
    Source = "logo"

Download image from the internet

var image = new Image
    Source = new UriImageSource
        Uri = new Uri("")

Scaling and Resizing the Image

We can use the WidthRequest and HeightRequest to set width and height of the image as follows :

 <Image Source="logo" WidthRequest="70" HeightRequest="70"  />

In addition to setting the width and height of the image, you can also set the Aspect property as follows :

<Image Source="logo" WidthRequest="70" HeightRequest="70" Aspect="AspectFit" />

The available options are : - AspectFit - Fit the set width and height and maintain the aspect - AspectFill - Fill the set width and height and maintain the apsect - Fill - Fill the set width and height

Custom library for image loading and caching

There are many available image loading and caching that provides more functionality that the default ImageView, e.g you might want to retry get the image, show a placeholder image, an error image, control the caching duration or transform the image on the fly.

We are going to use the FFImageLoading library in place of the default ImageView so we can show a placeholder image whilst we fetch images across the network.

Install the FFImageLoading

You will need to install the following packages in both Android and iOS projects and also the shard project :

  • Xamarin.FFImageLoading.Forms
  • Xamarin.FFImageLoading.Svg.Forms
  • Xamarin.FFImageLoading.Transformations

Initialize each project

You will need run some setup code to initialize the rendered for each project.


In the MainActivity.cs file add the following line :


The OnCreate method should be look like this after adding the line :

protected override void OnCreate(Bundle bundle)
    TabLayoutResource = Resource.Layout.Tabbar;
    ToolbarResource = Resource.Layout.Toolbar;


    global::Xamarin.Forms.Forms.Init(this, bundle);

    LoadApplication(new App());


In the iOS project, add the following line in the AppDelegate.cs file :


Adding namespace

Add the namespace :


Add the image view

Once the namespace is defined you can now add the image view and customize the properties you require :

    Source="" />


We have a placeholder image add to both Android and iOS projects.