图像的相对路径受到 routify 中嵌套路由的影响

Question

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.

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

Answer 1

You should use an absolute path. ./ 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 )