Hello! I am Kotlin/JS newbie. I am trying to use a...

# javascript

[Alexey Artemiev]

Hello! I am Kotlin/JS newbie.
I am trying to use a PNG as element background.
In TS/React I just put the image near my module, reference it in module's CSS by its relative path (e.g. background-image: url('./icons/smth.png'); ), import the CSS to TSX module (e.g. import './smth.css'; ), and set className on my component.
In Kotlin/JS, following the examples, I have created an object

object SmthStyles : StyleSheet("SmthStyles", isStatic = true) {
    val smth by css {
        backgroundImage = Image("???")
    }
}

but I cannot figure out how to set my image by its relative path in the source tree.
Neither JsModule annotation, nor require function didn't help (I might misuse them), the image is not found at runtime.
There seems to be a special directory for resources (src/main/resources), but that didn't help also.
Could you please explain, how to do it? Google seems to know little useful about such things yet.
I use kotlin("js") version "1.4.31" and org.jetbrains:kotlin-styled:1.0.0-pre.113-kotlin-1.4.0

[Joffrey]

Sorry I'm late to the party. I remember having issues with this a while ago.
I ended up using background with a raw CSS string value to put my image, like this:

object SmthStyles : StyleSheet("SmthStyles", isStatic = true) {
    val smth by css {
        background = "url('images/some-image.jpg') center no-repeat"
        backgroundSize = "cover"
    }
}

And the image's path was src/main/resources/images/some-image.jpg.