1

I'm iterating my v-list-item and trying to use images from my assets folder using prepend-avatar prop but seems cant get to display it. I'm using vuetify 3 and nuxt 3.

Here is my 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>

The array that I'm iterating over

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: "",
        },
];
kiyowo
  • 13
  • 3

1 Answers1

0

Instead of using the assets folder to store the images. I would recommend using the public folder if you want to store static files. More information from Nuxt about the assets and public folders here

To access the public folder in your code, just using the /.

I've tested it and it works. See example https://stackblitz.com/edit/nuxt-starter-pc7usa?file=app.vue

Note: Do not store sensitive files inside the public folder

ReaganM
  • 1,290
  • 1
  • 11
  • thanks for your answer, I found similar issues to mine. https://stackoverflow.com/questions/74688433/why-loading-dynamically-assets-fails-on-nuxt-v3 – kiyowo Mar 12 '23 at 14:20