Search code examples
javascriptsvelterollup

Trailing backslash in SvelteJs routes - Changing Request Urls of static assets in public folder

So, I have a component in Svelte, which is supposed to get rendered in the route = property/:propId

This component is responsible for fetching a property by id and display them on the client.

But the issue, That I am facing is, in svelte -> as soon as in add a trailing / to the route, all request URLs for static assets are also changing. Which is causing the images/icons to break.

Like, as soon as I add property/ to the route, and render that component, requests for images/icons are going to property/Images/Chat.png and giving me 404 bc, that route doesn't exist, and all my images are stored inside Public/Images/

But without the trailing slash, the images/icons are rightly fetched from /Images/Chat.png w.r.t to the Public folder

Does anyone know any fix or workarounds?

Solution

  • I would recommend setting up the router/server to normalize URLs, i.e. always add or remove the slash, or to just use absolute paths for the resources (/Public/Images/... - start with a /).