Nuxt 嵌套链接导致图像 404答案

【问题标题】：Nuxt Nested link causes images 404Nuxt 嵌套链接导致图像 404
【发布时间】：2021-02-09 05:30:15
【问题描述】：

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

这是我的页面结构

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

如果我加载

一切正常。

但是如果我加载

我的所有图片都出现 404。

我检查了不起作用的页面上的图像链接，似乎它们的链接根据页面而变化。所以，我收到的不是我最初的电话<img src="svg/logo.svg">，而是<img src="about/svg/logo.svg">

我找不到问题的答案。

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

感谢您的回答，效果很好。我还有一个问题，把我的图片放在静态文件夹还是资产一个更好？
如果您将它们放在您的资产文件夹中，它们可能会在您的生产构建过程中进行优化。较小的文件大小通常是一件好事。但是，作为构建过程的一部分，文件名将被更改，这意味着已经下载过一次 img 的访问者在每次构建应用程序以进行生产时都必须再次下载它。如果您将图像存储在静态文件夹中，它们不会为您优化，但文件名重命名相同 - 因此访问者可以依靠他们的浏览器缓存来防止他们不必要地下载图像。
一般来说，我自己优化图像并将它们存储在静态目录中。