Image

This component can be used to load an image online or directly from the application.

Examples

To load your image, like you can do in HTML, just create a component image with the src property set to the link of your image.

Simple image

{
    "type": "image",
    "src": "https://avatars.githubusercontent.com/u/18312505?s=200&v=4",
}

Or using an application image. It will be fetched from the resources folder of the application.

{
    "type": "image",
    "src": "logo.png",
}

Image with placeholders

You can handle image loading, error, or other frame by adding any component in the correct property of the image component.

{
    "type": "image",
    "src": "https://avatars.githubusercontent.com/u/18312505?s=200&v=4",
    "errorPlaceHolder": {
        "type": "text",
        "value": "This placeholder is shown when the image encounters an error."
    },
    "framePlaceholder": {
        "type": "text",
        "value": "This placeholder is shown over the image as a custom frame."
    },
    "loadingPlaceholder": {
        "type": "text",
        "value": "This placeholder is shown when the image is still loading."
    }
}

Image size

If your image didn't show as expected in your app, you can define a fixed size using the width and height properties of the image component.

{
    "type": "image",
    "src": "https://avatars.githubusercontent.com/u/18312505?s=200&v=4",
    "width": 150,
    "height": 150,
}

Properties

Attribute	Description	Type
_type	The type of the element	image
src	The URL to the image. Will fetch the application's image if the URL does not start with `http(s)://`.	string
alignment	How to align the image.	string center bottomCenter bottomLeft bottomRight centerLeft centerRight topCenter topLeft topRight
centerSlice	The center slice for a nine-patch image.	Rect
errorPlaceholder	The error placeholder when the image encounters an error during loading.	Component
excludeFromSemantics	Whether to exclude this image from semantics.	boolean
filterQuality	The quality of the image.	string low high medium none
fit	How the image should fit the parent box.	string contain cover fill fitHeight fitWidth none scaleDown
framePlaceholder	A placeholder to display while the image is loading or to add effects to the image.	Component
gaplessPlayback	Whether the old image (true) or nothing (false) is shown when the image provider changes.	boolean
height	The image height.	number
isAntiAlias	Whether to paint the image with anti-aliasing.	boolean
loadingPlaceholder	A placeholder to display while the image is still loading.	Component
repeat	How the image should be repeated accross the bounds not covered by the image.	string noRepeat repeat repeatX repeatY
semanticLabel	A semantic description of the image. This is used for TalkBack on Android and VoiceOver on IOS.	string
width	The image width.	number