Vuetify Standard Setup (babel/eslint) image failed to load

Question

I'm working on a VueJS project and am trying to load an image on a carousel. I am using the standard setup and have the image in the assets folder. I reference the image URL with

<v-carousel-item src="@/assets/promo1.jpg">

But this throws an Image Load Failed error when I run the server using npm run serve.

console.js?66f6:36 [Vuetify] Image load failed

src: @/assets/promo1.jpg

found in

---> <VImg>
       <VCarouselItem>
         <VCarousel>
           <Home> at src/views/Home.vue
             <VApp>
               <App> at src/App.vue
                 <Root>

If one of the suggestions is messing with the webpack config, I can't seem to find that. Also, note that the initial image on the starter template worked fine. But my custom images don't work.

Answer 1

If you still need help, you can try this:

<script>
export default {
  data() {
    return {
      items: [
        {src: require('@/assets/img1.jpg')},
        {src: require('@/assets/img.jpg')}
      ]
    }
  }
}
</script>

and use:

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

Good luck