Async shortcodes in dynamic attribute

[sascha53]

This might be a noob question as async stuff always gives me headache... but when I try this in a webc template it returns the promise, not the actual image string:

<div :style="`background-image: url(${imageUrl('manja-vitolic-gKXKBY-C-Dk-unsplash.jpg')});`"></div>

This is my image-url.js, that gets imported into .eleventy.js and added as a shortcode via addShortcode:

const Image = require("@11ty/eleventy-img");

module.exports = async function (src) {

    let metadata = await Image(src, {
        widths: [600],
        formats: ["webp", "jpeg"],
        urlPath: "/img/",
    });

    let data = metadata.jpeg[metadata.jpeg.length - 1];

    //console.log(data);
    //sconsole.log(data.url);

    return data.url;
}

My expectation was/is that dynamic attributes/props in webc template can handle async shortcodes. What's a smart solution for this? I don't want to write async stuff in the dynamic attribute itself and keep it simple just with the function call. Also I know there is a synchronous image function but I don't want to use that.