Images

Images

image

imagedefault: empty image

The image type is a reference to an image.

In Slint, an image can be loaded from a file with the @image-url("...") construct. The address within the @image-url function must be a string literal and the image is resolved at compile time. An empty string produces an empty image.

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.

Loading image from http is only supported in SlintPad ↗.

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

Supported format are SVG, and formats supported by the image crate ↗: AVIF, BMP, DDS, Farbfeld, GIF, HDR, ICO, JPEG, EXR, PNG, PNM, QOI, TGA, TIFF, WebP.

On the web, the browser decodes images, so every format the browser supports works. Compressed SVG (.svgz) is the exception: browsers don’t render it.

Rust

In Rust, properties or struct fields of the image type are mapped to slint::Image.

Note

By default, only PNG, JPEG, and SVG are supported. Enable the image-default-formats Cargo feature to support the other formats listed above, which comes at a cost of increased binary size and compilation time. This feature has no effect on the web, where the browser decodes images.

C++

In C++, properties or struct fields of the image type are mapped to slint::Image.

NodeJS

In JavaScript properties or struct fields of the image type are mapped an object that implement the ImageData interface.

Python

In Python, properties or struct fields of the image type are mapped to Image.

It is also possible to load images supporting 9 slice scaling ↗ (also called nine patch or border images) by adding a nine-slice(...) argument. The argument can have either one, two, or four numbers that specifies the size of the edges. The numbers are either top right bottom left or vertical horizontal, or one number for everything

// 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

See also the Image element.

Images have the following properties:

width

The width of the image in pixels, as an int. An empty image has a width of 0.

height

The height of the image in pixels, as an int. An empty image has a height of 0.

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

    // Note: http URL only work on the web version.
    in property <image> some_image: @image-url("https://slint.dev/logo/slint-logo-full-light.svg");

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

        // Check the size to find out if the image is empty.
        if some_image.width > 0 : Image {
            source: some_image;
        }
    }
}

slint