Is it possible to pass images/image urls as properties

[Kyr27]

Hi,
I started learning slint a few days ago and now I'm trying to pass image urls as properties for my sidebar so that i can set their icons easily:

appwindow.slint

HorizontalLayout {
    sidebar := Sidebar {
        title: @tr("Navigation");
        model: 
        [
            { text: @tr("Menu" => "placeholder"), imageUrl: "./icons/image-placeholder.svg"}, // leads to sidebar.slint throwing error
            { text: @tr("Menu" => "placeholder"), imageUrl: "./icons/image-placeholder.svg"},
            { text: @tr("Menu" => "placeholder"), imageUrl: "./icons/image-placeholder.svg"},
            { text: @tr("Menu" => "placeholder"), imageUrl: "./icons/image-placeholder.svg"}
            // { text: @tr("Menu" => "placeholder"), imageUrl: @image-url("./icons/image-placeholder.svg")} // cannot convert image to string
        ];
    }
}

I used in property <image> imagePath <=> icon.source; to let the sidebar item component take in image urls, but i'm getting an error when trying to pass to it using image-url: "@image-url must contain a plain path as a string literal"

sidebar.slint

VerticalLayout {
    padding-top: StyleMetrics.layout-padding;
    padding-bottom: StyleMetrics.layout-padding;
    spacing: StyleMetrics.layout-spacing;
    alignment: start;

    label := Text {
        font-size: 16px;
        horizontal-alignment: center;
    }

    navigation := VerticalLayout{
        alignment: start;
        vertical-stretch: 0;
        
        for item[i] in root.model : SideBarItem {
            clicked => { root.current-item = i; }
            has-focus: i == root.current-focused;
            text: item.text;
            imagePath: @image-url(item.imageUrl); // error: @image-url must contain a plain path as a string literal
            selected: i == root.current-item;
        }
    }
}

I tried looking around for a solution but couldn't find anything, is there a way to achieve what i'm trying to do here?
Thanks in advance.
P.S: the sidebar is mostly the same as the one from slintpad's gallery demo, i was just trying to add icons to it.

[ogoffart]

Basically you cannot convert a string to an image or an image to a string.
So this means that you need to have it marked as an image and not a string.

Your Sidebar class probably has a

in property <[{text: string, imageUrl: string}]> model;

But it imageUrl shouldn't be a string, it should be an image, like so:

in property <[{text: string, imageUrl: image}]> model;

Then this should work:

{ text: @tr("Menu" => "placeholder"), imageUrl: @image-url("./icons/image-placeholder.svg")}

(imageUrl might not be the right name for it since the field is really an image and not its URL.)

I hope this helps.

[Kyr27]

Thank you, that worked!