Lenra Docs
Register on Lenra
  • Home
  • Getting started
    Open/Close
  • Guides
    Open/Close
  • Features
    Open/Close
  • References
    Open/Close
  • Contribute

    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

    AttributeDescriptionType
    _typeThe type of the element
    • 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
    • center
    • bottomCenter
    • bottomLeft
    • bottomRight
    • 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
    • low
    • high
    • medium
    • 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