Nuxt 嵌套链接导致图像 404

Question

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

这是我的页面结构

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

如果我加载

• 本地主机：3000/
• localhost:3000/about
• 本地主机：3000/旅行者

一切正常。

但是如果我加载

• localhost:3000/旅行者/4
• localhost:3000/旅行者/
• localhost:3000/关于/

我所有的图片都是 404。

我检查了它不起作用的页面上的图像链接，它们的链接似乎根据页面而变化。所以，而不是我最初的电话是

<img src="svg/logo.svg">

我得到

<img src="about/svg/logo.svg">

我找不到问题的答案。

Answer 1

您的

/

中缺少前导

img src

。例如，如果您的

logo.svg

目录中名为

images

的文件夹中有

static

，则正确的

src

是：

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

没有前导 /，您的路径是 relative page，而不是您的应用程序的

static

目录。

Answer 2

有时在 Nuxt JS 版本 3.0 中。它需要像这样写static路径，

<img src="@/static/img/hamburg.png" />

对于:src问题你可以这样写，

<img :src="@/static/img/hamburg.png" />

或者如果它是一个 JSON 数据数组属性（例如，对于 $destinations 中的每个 $destination），

 <img :src="`_nuxt/static/img/${destination.image}`"/>