relative path of image gets affected by nested routes in routify

user_14461089 0
Viewed 696

I have a nested route in routify with the below folder structure, where the image is placed in public folder and referred here and I'm using the image in App.svelte. Everything works fine. when I go to example.com/1/2 the relative path doesn't work properly

  public
    --assets
      --images
        --image.png
  src
    --pages
      --[aid]
        --[bid].svelte
      --_layout.svelte
    
    App.svelte

App.svelte

  <img src="./assets/images/zrx-logo.png" />

this is how I referred to the image in App.svelte

ERROR

GET http://localhost:5000/1/assets/images/image.png 404 (Not Found) this is how it gets resolved instead of http://localhost:5000/assets/images/image.png.

P.S when the URL is example.com/1 the image gets resolved properly

routify svelte-3 relative-path javascript
1 Answers

You should use an absolute path: / (without dot). ./ means the current folder. thus at http://localhost:5000/1 the current folder is the root of the website which is public folder which is translated to /public

./ at http://localhost:5000/1/2 means /public/1

to resolve your issue set the path to /assets/images/zrx-logo.png this means we start looking for the file directly from the root folder (/public)

user_84450720
Related