Nuxt Nested link 导致图像 404

Question

我在 Nuxt Universal 应用程序中加载图像时遇到问题。

这是我的页面结构

├── travelers
│   ├── _id.vue
│   └── index.vue
│── about
│── index

如果我加载

• localhost:3000/
• localhost:3000/about
• localhost:3000/旅行者

一切正常。

但是如果我加载

• localhost:3000/travelers/4
• localhost:3000/travelers/
• localhost:3000/about/

我的所有图片都是 404。

我检查了它不起作用的页面上的图像 link，它们的 link 似乎根据页面而变化。所以，我得到的不是 <img src="svg/logo.svg"> 的初始呼叫，而是 <img src="about/svg/logo.svg">

我找不到问题的答案。

Answer 1

您的 img src 中缺少前导 /。例如，如果您的 static 目录中名为 images 的文件夹中有 logo.svg，则正确的 src 是：

<img src=“/images/logo.svg/>

如果没有前导 /，您的路径是相对 页面，而不是应用程序的 static 目录。