Image

The Image widget shows an image in your mobile application.

Note: When working with images following the best practices is a must.

Usage

<!-- Using a resource image (logo_white_bg.png) from App_Resources/<platform> folders -->
<Image src="res://logo_white_bg" stretch="aspectFill"></Image>

<!-- Using local image from app/images/logo.png -->
<Image src="~/images/logo.png" stretch="aspectFit"></Image>

<!-- 
    Setting loadMode to async will prevent freezing the UI 
    on Android when loading photos async (e.g. frm online API) 
-->
<Image src="~/images/logo.png" loadMode="async" stretch="aspectFit"></Image>

Image {
    width: 50;
    height: 50;
}

.fas {
    font-family: "Font Awesome 5 Free", "fa-solid-900";
    font-weight: 900;
}

.t-36 {
    font-size: 36;
}

Improve this document

Demo Source

Styling

<StackLayout height="100%"  class="m-15" backgroundColor="lightgray">
    <!-- Image with CSS and an icon fonts -->
    <Image src="font://&#xF2b9;" class="fas t-36"></Image>

    <!-- Image with stretch property ("none", "aspectFill" and "aspectFit") -->
    <Image src="res://logo_white_bg" stretch="aspectFill"></Image>
</StackLayout>

Image {
    width: 100;
    height: 100;
}

.fas {
    font-family: "Font Awesome 5 Free", "fa-solid-900";
    font-weight: 900;
}

.t-36 {
    font-size: 36;
}

Improve this document

Demo Source

Properties

API References

Native Component