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

Answer 2

The vue-loader module used by vue-cli 3 cannot resolve relative paths to static assets by itself; it needs some hints. Slideman's answer is good and the hack he suggests is exactly what vue-loader is expected to do behind the scenes in order to resolve relative paths successfully. It's just that it can't do it right off the bat for custom vue components (tags that aren't part of the HTML5 specification).

I faced the same issues a few weeks ago and found a solution which I added to vuetify's documentation (FAQs, section on relative images not working for custom components). The gist of the solution is that you can access vue-loader's "transformAssetUrls" option by using the chainWebpack plugin in your vue.config.js file.

As you can see in the documentation, you have to list all the custom components names that you reference static assets from and the names of the attributes where their relative paths are written:

// vue.config.js
module.exports = {
 chainWebpack: config => {
   config.module
     .rule('vue')
     .use('vue-loader')
     .loader('vue-loader')
     .tap(options => Object.assign(options, {
           transformAssetUrls: {
              'v-img': ['src', 'lazy-src'],
              'v-card': 'src',
              'v-card-media': 'src',
              'v-responsive': 'src',
              'v-carousel-item': 'src',
              //...
           }
           }))
 }
   //...
}

Hope it helps; if you don't fully understand, don't hesitate to ask additional questions.