v-list-item 前置头像不显示

Question

我正在迭代我的

v-list-item

并尝试使用

prepend-avatar

道具使用我的资产文件夹中的图像，但似乎无法显示它。我正在使用 vuetify 3 和 nuxt 3.

这是我的

v-list-item

<v-list-item
   link
   v-for="item in navLinks"
   :key="item.index"
   prepend-avatar="item.icon"
   :title="item.title"
   :value="item.value"
   :to="item.path"
>
</v-list-item>

我正在迭代的数组

navLinks: [
        {
          icon: "@/assets/images/icons/image1.png",
          title: "Link 1",
          value: "link 1",
          path: "/",
        },
        {
          icon: "@/assets/images/icons/image2.png",
          title: "Link 2",
          value: "link 2",
          path: "",
        },
        {
          icon: "@/assets/images/icons/image3.png",
          title: "Link 3",
          value: "link 3",
          path: "",
        },
        {
          icon: "@/assets/images/icons/image4.png",
          title: "Link 4",
          value: "link 4",
          path: "",
        },
];

Answer 1

而不是使用

assets

文件夹来存储图像。如果你想存储静态文件，我建议使用

public

文件夹。 Nuxt 提供的有关

assets

和

public

文件夹的更多信息这里

要访问代码中的

public

文件夹，只需使用

/

.

我已经测试过它并且有效。见例子 https://stackblitz.com/edit/nuxt-starter-pc7usa?file=app.vue

注意： 公共文件夹内不要存放敏感文件