---
title: "Images"
description: "The image type of the Slint language."
---
{/* cSpell: ignore Farbfeld */}

import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
import Link from '@slint/common-files/src/components/Link.astro';
import { Tabs, TabItem } from '@astrojs/starlight/components';
import LangRefLink from '@slint/common-files/src/components/LangRefLink.astro';
import SC from '@slint/common-files/src/components/SC.astro';
import NotInSC from '@slint/common-files/src/components/NotInSC.astro';

<SC>
### image
<SlintProperty propName="image" typeName="image" defaultValue='empty image'>

An `image` is a rectangle of pixels: rows of *width* pixels each, and every
pixel a [color](../colors-and-brushes/). \{#sls.type.image}

The default `image` is *no image*: it has no pixels, and its width and height
are 0. \{#sls.type.image.none}

An image is created with an `@image-url()` image literal or set by the
application. \{#sls.type.image.sources}

<NotInSC>
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.

Unlike an [import path](../../language/imports/#import-paths),
the address decodes the [escape sequences](../strings/#string) `\"`, `\\`, `\n`, and `\u{...}`,
so a literal backslash must be written as `\\`.

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](https://slintpad.com).

Images can also be loaded from [`data:` URIs](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data), 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](https://crates.io/crates/image):
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.

<Tabs syncKey="dev-language">
<TabItem label="Rust" icon="seti:rust">
In Rust, properties or struct fields of the image type are mapped to <LangRefLink lang="rust-slint" relpath="struct.Image">`slint::Image`</LangRefLink>.
:::note[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.
:::
</TabItem>
<TabItem label="C++" icon="seti:cpp">
In C++, properties or struct fields of the image type are mapped to <LangRefLink lang="cpp" relpath="api/slint/image/">`slint::Image`</LangRefLink>.
</TabItem>
<TabItem label="NodeJS" icon="node">
In JavaScript properties or struct fields of the image type are mapped an object that implement the <LangRefLink lang="nodejs" relpath="api/interfaces/imagedata/">ImageData interface</LangRefLink>.
</TabItem>

<TabItem label="Python" icon="seti:python">
In Python, properties or struct fields of the image type are mapped to <LangRefLink lang="python" relpath="api/classes/image/">`Image`</LangRefLink>.
</TabItem>

</Tabs>

It is also possible to load images supporting [9 slice scaling](https://en.wikipedia.org/wiki/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

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

See also the [Image element](/master/docs/slint/reference/elements/image.md).
</NotInSC>

</SlintProperty>

An image has the fields `width` and `height`, read with the `.` operator
as in `logo.width`: \{#sls.type.image.properties}

#### width

The width of the image in pixels, as an `int`.
An image without pixels has a width of 0. \{#sls.type.image.width}

#### height

The height of the image in pixels, as an `int`.
An image without pixels has a height of 0. \{#sls.type.image.height}

```slint
export component Example inherits Window {
    in property <image> logo;
    out property <int> logo-width: logo.width;
}
```

<NotInSC>
```slint
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;
        }
    }
}
```

</NotInSC>
</SC>