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

【问题标题】：relative path of image gets affected by nested routes in routify图像的相对路径受到 routify 中嵌套路由的影响
【发布时间】：2021-05-24 17:44:53
【问题描述】：

我在 routify 中有一个嵌套路由，具有以下文件夹结构，其中图像放置在公用文件夹中并在此处引用，我正在使用 App.svelte 中的图像。一切正常。当我转到 example.com/1/2 时，相对路径无法正常工作

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

App.svelte

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

这就是我在 App.svelte 中引用图像的方式

错误

GET http://localhost:5000/1/assets/images/image.png 404（未找到）这是如何解决的而不是 http://localhost:5000/assets/images/image.png。

P.S 当 URL 为 example.com/1 时，图像会正确解析

【问题讨论】：

标签： javascript relative-path svelte-3 routify

【解决方案1】：

您应该使用绝对路径：/（不带点）。 ./ 表示当前文件夹。因此在http://localhost:5000/1，当前文件夹是网站的根目录，即public文件夹，它被翻译成/public

./http://localhost:5000/1/2 表示/public/1

要解决您的问题，请将路径设置为 /assets/images/zrx-logo.png，这意味着我们会直接从根文件夹 (/public) 开始查找文件

【讨论】：