Accessing resources from library modules

[NikSatyr]

Hey, first of all thanks for such an amazing framework!

I originally come from the Android / KMP development, so my question might be a bit dumb since I lack web expertise.

I am developing a website using modular (Kobweb libraries) approach. I'd like to have a module that holds all common components like headers, footers etc, and pack separate pages into their own modules.

However, I cannot seem to figure out how to access the resources (images) for the shared components from the subroutes. I'm using relative paths, and would like to avoid absolute. Normally, this would be handled by a template engine, but I'm not sure how to achieve this in Kobweb.

I think the repro project will save us a lot of words.

Steps to reproduce:

1. Unzip the attachment and launch the Kobweb app
2. Open localhost:8080 – the kobweb logo in the top left corner is displayed properly
3. Open localhost:8080/admin – the kobweb logo in the top left corner is still displayed properly
4. Open localhost:8080/subfolder/admin – the kobweb logo fails to load

You can find the relevant project structure in the attached sample, the kobweb logo is located in shared/jsMain/resources/public/images

Could you please help me out the fix for this situation?

sample.zip

[bitspittle]

Thank you!

(Quick tip: before sharing a source zip, run ./gradlew clean as that will remove a lot of build files resulting in a much smaller final download size)

To fix your issue, the path in SharedHeader.kt should be "/images/kobweb-logo.png" with a leading slash. Otherwise, your site is trying to find a file at "subfolder/images/kobweb-logo.png"

If (on Chrome at least) you inspect your page with dev tools, go to the Network tab, and refresh the page, you can see this as well:

[bitspittle]

Ah, you mentioned you wanted to avoid absolute paths. But there's probably not a way around this in Kobweb. I'm not really clear how a templating engine would avoid the issue though. If you had one file at /public/images/ex.png and another at /public/subfolder/images/ex.png, how should that get resolved?

[NikSatyr]

thanks for a fast reply!

(Quick tip: before sharing a source zip, run ./gradlew clean as that will remove a lot of build files resulting in a much smaller final download size)

good point, thanks. I've actually done it, but I might have accidentally re-run the server. sorry for that.

To fix your issue, the path in SharedHeader.kt should be "/images/kobweb-logo.png" with a leading slash

actually, that's just what I needed, this works for me

what I meant by absolute path was smth like localhost:8080/public/images/ex.png, and it doesn't appear to be the case. sorry for the confusion