Image

Image {
    source: @image-url("mini-banner.png");
}

slint

Use the Image element to display an image.

Properties

colorize

brush default: a transparent brush

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

Image {
    source: @image-url("slint-logo-simple-dark.png");
    colorize: darkorange;
}

slint

source

image default: the empty image

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.

Images can also be loaded from data: URIs ↗, with either base64 or URL-encoded content. For example: @image-url("data:image/png;base64,iVBORw0KGgo...").

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;
    }
}

slint

// nine-slice scaling
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));
        }
    }
}

slint

Use the `@image-url` macro to specify the image’s path.

image-fit

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

Image {
    width: 200px; height: 50px;
    source: @image-url("mini-banner.png");
    image-fit: fill;
}

slint

Image {
    width: 250px; height: 40px;
    source: @image-url("mini-banner.png");
    image-fit: contain;
}

slint

Image {
    width: 250px; height: 250px;
    source: @image-url("mini-banner.png");
    image-fit: cover;
}

slint

Image {
    width: 400px; height: 400px;
    source: @image-url("mini-banner.png");
    image-fit: preserve;
}

slint

image-rendering

enum ImageRendering default: smooth

Image {
    width: 800px;
    source: @image-url("mini-banner.png");
    image-rendering: smooth;
}

slint

Image {
    width: 800px;
    source: @image-url("mini-banner.png");
    image-rendering: pixelated;
}

slint

horizontal-alignment

enum ImageHorizontalAlignment default: center

The horizontal alignment of the image within the element.

vertical-alignment

enum ImageVerticalAlignment default: center

The vertical alignment of the image within the element.

Image Tiling

horizontal-tiling

enum ImageTiling default: none

How the image is tiled horizontally.

vertical-tiling

enum ImageTiling default: none

Image {
    width: 400px;
    height: 400px;
    source: @image-url("slint-logo.png");
    horizontal-tiling: repeat;
}

slint

Image {
    width: 400px;
    height: 400px;
    source: @image-url("slint-logo.png");
    horizontal-tiling: round;
}

slint

Image {
    width: 400px;
    height: 400px;
    source: @image-url("slint-logo.png");
    vertical-tiling: repeat;
}

slint

Image {
    width: 400px;
    height: 400px;
    source: @image-url("slint-logo.png");
    vertical-tiling: round;
}

slint

Image {
    width: 400px;
    height: 400px;
    source: @image-url("slint-logo.png");
    vertical-tiling: round;
    horizontal-tiling: round;
}

slint

Source Clip

source-clip-x

int default: 0

source-clip-y

int default: 0

source-clip-width

int default: source.width - source.clip-x

source-clip-height

int default: source.height - source.clip-y

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

Accessibility

Alternative text

Consider giving an alternative text description of your image by setting the accessible-label property:

Image {
    width: 100px;
    height: 100px;
    source: @image-url("slint-logo.png");
    accessible-label: "Slint logo";
}

slint

Filtering out images for users of assistive technologies

By default, images have the accessible-role property set to image. If your image is purely decorative and doesn’t convey any information, consider removing it from the accessibility tree:

Image {
    source: @image-url("mini-banner.png");
    accessible-role: none;
}

slint