Hardcoding of Image source

[john-]

I have read many threads on the topic of setting an Image source: to a variable and am not understanding it yet. This is probably due to my limited knowledge of rust and slint.

The following does not work as @image-url needs a string literal and not a variable.

I am pretty sure I want to have the images loaded from my Rust code using ``slint::Image::load_from_path`. However, I am not clear on the interaction between the .slint file and my main.rs.

I have fleshed out a function

My attempt at using a callback did not work because on the .slint side I don't see the hook to execute the call back. Maybe some kind of "on component load" but have not found anything.

I can provide the code for this attempt.

If someone can provide an example of how to do this it would be great.

main.slint:

import { FunctionButton } from "function-button.slint";

export component AppWindow inherits Window {

    width:1024px;
    height: 576px;

    VerticalLayout {
        spacing: 10px;
        // alignment: center;
        x: 0px;
        y: 0px;
        width: 120px;
        height: parent.height;

        in property <[{label: string, image: string}]> model: [
            {label: "Telephone", image: "assets/Telephone.png" },
            {label: "Music", image: "assets/Music.png" },
        ];
        for data in model: FunctionButton {
            height: 120px;
            image: data.image;
            label: data.label;
        }
    }
}

function-button.slint:

import { VerticalBox } from "std-widgets.slint";

export component FunctionButton inherits Rectangle {
    in property<string> label;
    in property<string> image;

    background: lightgray;

    VerticalBox {
        Image {
            source: @image-url(root.image);   // error: @image-url must contain a plain path as a string literal
        }
        Text {
            horizontal-alignment: center;
            font-size: 20px;
            text: root.label;
        }
    }
}

[Vadoola]

Does this work if you do it like this? making the property an image instead of a string?

Main.slint

import { FunctionButton } from "function-button.slint";

export component AppWindow inherits Window {

    width:1024px;
    height: 576px;

    VerticalLayout {
        spacing: 10px;
        // alignment: center;
        x: 0px;
        y: 0px;
        width: 120px;
        height: parent.height;

        in property <[{label: string, image: image}]> model: [
            {label: "Telephone", image: @image-url("assets/Telephone.png") },
            {label: "Music", image: @image-url("assets/Music.png") },
        ];
        for data in model: FunctionButton {
            height: 120px;
            image: data.image;
            label: data.label;
        }
    }
}

function-button.slint:

import { VerticalBox } from "std-widgets.slint";

export component FunctionButton inherits Rectangle {
    in property<string> label;
    in property<image> image;

    background: lightgray;

    VerticalBox {
        Image {
            source: root.image;
        }
        Text {
            horizontal-alignment: center;
            font-size: 20px;
            text: root.label;
        }
    }
}

[john-]

It does work. Thanks!

When I first saw your approach I didn't see how it was going to help but it did. I am still not sure why doing the `@image-url()' in the higher level .slint changes things but that won't stop me from doing it :)