Rendering of local images in <v-carousel-item> not working but online image links are working

Question

I am new to vuejs and vuetify, I am trying to create a simple carousel component in a sample app created using the vue cli 3. I am able to get the carousel content but its not loading the local images present in the asset folder, but the sample images in the vuetify page containing an online link of the image is working.

<template>
<div> 
<v-carousel>
  <v-carousel-item v-for="i in 4" :key="i">
     <v-img contain :src="items[i]"></v-img>
  </v-carousel-item>
</v-carousel>
</div>
</template>
<script>
export default {
data() {
    items: [
        '../assets/img/PreviousYear/17/top10/2.PNG',
        '../assets/img/PreviousYear/17/top10/1.PNG',
        "https://cdn.vuetifyjs.com/images/carousel/bird.jpg",
        "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
      ]
  }
}
</script>

The images 1.PNG and 2.PNG is not working but the other two are. Can someone help me on this, what I am missing.

Answer 1

"Vue loader converts relative paths into require functions automatically for you. Unfortunately, this is not the case when it comes to custom components. You can circumvent this issue by using require. If you're using Vuetify as a Vue-CLI 3 plugin, you can edit your project's vue.config.js file by modifying the options for vue-loader." from Vuetify

// Incorrect
<v-img src="../path/to/img" />

 // Correct
 <v-img :src="require('../path/to/img')" />

So, I would change your items array to this format:

items: [
    {
      src: require('../assets/img/PreviousYear/17/top10/2.PNG')
    },
    {
      src: require('../assets/img/PreviousYear/17/top10/1.PNG')
    },
    {
      src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
    },
    {
      src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
    }
  ]

And your html like this:

<v-carousel>
  <v-carousel-item
    v-for="(item,i) in items"
    :key="i"
    :src="item.src"
  ></v-carousel-item>
</v-carousel>

Hope it helps. :)