Image

Register on Lenra

Element of type Image

image

The image component.

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

Examples

Simple image

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

Image with placeholders

{
    "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

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

Properties

AttributeDescriptionType
typeThe type of the elementstring ("image")
srcThe URL to the image. Will fetch the application's image if the URL does not start with `http(s)://`.string
alignmentHow to align the image.string ("bottomCenter", "bottomLeft", "bottomRight", "center", "centerLeft", "centerRight", "topCenter", "topLeft", "topRight")
centerSliceThe center slice for a nine-patch image.Rect
errorPlaceholderThe error placeholder when the image encounters an error during loading.component
excludeFromSemanticsWhether to exclude this image from semantics.boolean
filterQualityThe quality of the image.string ("high", "medium", "low", "none")
fitHow the image should fit the parent box.string ("contain", "cover", "fill", "fitHeight", "fitWidth", "none", "scaleDown")
framePlaceholderA placeholder to display while the image is loading or to add effects to the image.component
gaplessPlaybackWhether the old image (true) or nothing (false) is shown when the image provider changes.boolean
heightThe image height.number
isAntiAliasWhether to paint the image with anti-aliasing.boolean
loadingPlaceholderA placeholder to display while the image is still loading.component
repeatHow the image should be repeated accross the bounds not covered by the image.string ("noRepeat", "repeat", "repeatX", "repeatY")
semanticLabelA semantic description of the image. This is used for TalkBack on Android and VoiceOver on IOS.string
widthThe image width.number