Skip to content
Slint Language Docs

Image

test-example.slint
export component Example inherits Window {
    width: 100px;
    height: 100px;
    VerticalLayout {
        Image {
            source: @image-url("..images/slint-logo-full-light.svg");
            // image-fit default is `contain` when in layout, preserving aspect ratio
        }
        Image {
            source: @image-url("..images/slint-logo-full-light.svg");
            colorize: red;
        }
    }
}

An Image can be used to represent an image loaded from a file. Supported image formats are:

  • png
  • jpeg
  • svg

Properties

colorize

type: brush
default: <???>

When set, the image is used as an alpha mask and is drawn in the given color (or with the gradient).

horizontal-alignment

type: enum
default: <???>

ImageHorizontalAlignment

This enum specifies the horizontal alignment of the source image.

  • center: Aligns the source image at the center of the element.
  • left: Aligns the source image at the left of the element.
  • right: Aligns the source image at the right of the element.

horizontal-tiling

type: enum
default: none

ImageTiling

This enum specifies how the source image will be tiled.

  • none: The source image will not be tiled.
  • repeat: The source image will be repeated to fill the element.
  • round: The source image will be repeated and scaled to fill the element, ensuring an integer number of repetitions.

image-fit

type: enum
default: `contain` when the `Image` element is part of a layout, `fill` otherwise

ImageFit

This enum defines how the source image shall fit into the element.

  • fill: Scales and stretches the source image to fit the width and height of the element.
  • contain: The source image is scaled to fit into the element’s dimension while preserving the aspect ratio.
  • cover: The source image is scaled to cover into the element’s dimension while preserving the aspect ratio. If the aspect ratio of the source image doesn’t match the element’s one, then the image will be clipped to fit.
  • preserve: Preserves the size of the source image in logical pixels. The source image will still be scaled by the scale factor that applies to all elements in the window. Any extra space will be left blank.

image-rendering

type: enum
default: smooth

ImageRendering

This enum specifies how the source image will be scaled.

  • smooth: The image is scaled with a linear interpolation algorithm.
  • pixelated: The image is scaled with the nearest neighbor algorithm.

Rotation

Rotates the text by the given angle around the specified origin point. The default origin point is the center of the element. When these properties are set, the Image can’t have children.

Image {
    x: 0;
    y: 0;
    source: @image-url("images/slint-logo.svg");
    rotation-angle: 45deg;
    rotation-origin-x: 0;
    rotation-origin-y: 0;
}

rotation-angle

type: angle
default: 0deg

rotation-origin-x

type: length
default: <???>

rotation-origin-y

type: length
default: <???>

source

type: image
default:

The image type is a reference to an image. It’s defined using the @image-url("...") construct. The address within the @image-url function must be known at compile time.

Slint looks for images in the following places:

  1. The absolute path or the path relative to the current .slint file.
  2. The include path used by the compiler to look up .slint files.

Access an image’s source dimension using its source.width and source.height properties.

export component Example inherits Window {
    preferred-width: 150px;
    preferred-height: 50px;


    in property <image> some_image: @image-url("https://slint.dev/logo/slint-logo-full-light.svg");


    Text {
        text: "The image is " + some_image.width + "x" + some_image.height;
    }
}

(in image): The image to load. Use the @image-url("...") macro to specify the location of the image.

source-clip-x

source-clip-y

source-clip-width

source-clip-height ** (in int): Properties in source

image coordinates that define the region of the source image that is rendered. By default the entire source image is visible:

PropertyDefault Binding
source-clip-x0
source-clip-y0
source-clip-widthsource.width - source-clip-x
source-clip-heightsource.height - source-clip-y

vertical-alignment** (in _enum [ImageVerticalAlignment](../language/builtins/enums.

md#imageverticalalignment)_): The vertical alignment of the image within the element.

  • vertical-tiling (in enum ImageTiling): Whether the image should be tiled on the vertical axis.
  • width, height (in length): The width and height of the image as it appears on the screen.The default values are the sizes provided by the source image. If the Image is not in a layout and only one of the two sizes are specified, then the other defaults to the specified value scaled according to the aspect ratio of the source image.

Example using nine-slice:

export component Example inherits Window {
    width: 100px;
    height: 150px;
    VerticalLayout {
        Image {
            source: @image-url("https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png", nine-slice(30 30 30 30));
        }
    }
}