Skip to content
Slint Docs

图像

image

Section titled “image”

imagedefault: empty image

image 是一个像素矩形：每行 width 个像素，每个 像素是一种 color。 {#sls.type.image}

默认 image 是 无图像：它没有像素，宽度和高度 为 0。 {#sls.type.image.none}

图像通过 @image-url() 图像字面量创建，或由 应用程序设置。 {#sls.type.image.sources}

image 类型是对图像的引用。

在 Slint 中，可以使用 @image-url("...") 构造从文件加载图像。 @image-url 函数中的地址必须是字符串字面量，图像在编译时解析。 空字符串产生空图像。

与 导入路径 不同， 该地址会解码转义序列 \"、\\、\n 和 \u{...}， 因此字面反斜杠必须写为 \\。

Slint 在以下位置查找图像：

  1. 绝对路径或相对于当前 .slint 文件的路径。
  2. 编译器用于查找 .slint 文件的包含路径。

仅在 SlintPad 中支持从 http 加载图像。

也可以从 data: URI 加载图像，内容可以是 base64 或 URL 编码。 例如：@image-url("data:image/png;base64,iVBORw0KGgo...")。

支持的格式有 SVG，以及 image crate 支持的格式： AVIF、BMP、DDS、Farbfeld、GIF、HDR、ICO、JPEG、EXR、PNG、PNM、QOI、TGA、TIFF、WebP。

在 Web 上，浏览器解码图像，因此浏览器支持的每种格式都可以使用。 压缩 SVG（.svgz）是例外：浏览器不会渲染它。

在 Rust 中，image 类型的属性或结构体字段映射到 slint::Image。

也可以加载支持 9 宫格缩放（也称为九宫格或边框图像）的图像， 方法是添加 nine-slice(...) 参数。该参数可以有一个、两个或四个数字，用于指定边缘的大小。 数字为 top right bottom left 或 vertical horizontal，或一个数字表示全部

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

另请参见 Image 元素。

图像具有 width 和 height 字段，使用 . 运算符读取， 如 logo.width： {#sls.type.image.properties}

width

Section titled “width”

图像的宽度（以像素为单位），为 int。 没有像素的图像宽度为 0。 {#sls.type.image.width}

height

Section titled “height”

图像的高度（以像素为单位），为 int。 没有像素的图像高度为 0。 {#sls.type.image.height}

export component Example inherits Window {
    in property <image> logo;
    out property <int> logo-width: logo.width;
}
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;
        }
    }


}
slint
plaintext

© 2026 SixtyFPS GmbH