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.

Twinberry

"Image Load Failed" Is that really an error you get? Or is there more to it? Also where do you use @/assets/promo1.jpg in code etc... provide more info I guess. – Triolet

I would also be curious to know the answer to this. I've ran into this problem before as well and I ended up just using firebase storage and using the links from there. – Chaworth

That is the error @Triolet – Twinberry

have you tried using it like so: :src="require('@/assets/promo1.jpg')" – Triolet

I have but it doesn't seem to work – Twinberry

Have you tried to load it on some other component .e.g. <img> instead of v-carousel-item? Does the image work if you try to load it in the same matter i.e. <img src="@/assets/promo1.jpg">? – Triolet

@Chaworth are you talking about vuetify components? or loading images in general with vue? I presume if above works then it could be bug in vuetify. Cuz in new setup I can load images without mentioned errors. But I'm using a bit older version. Could be some recent changes with v-img? – Triolet

It works with <img>, interesting! Any ideas what might be up? Also, deep links work. Anything hosted online works. – Twinberry

@Twinberry Well as I've just said above, I presume it's some bug in vuetify, best ask on their github (perhaps their discord first, just to be sure?). Or search if somebody reported it, I'm not aware of it, just speculating :) – Triolet

@Triolet Yeah I believe it was with the vuetify carousel. I can't remember for certain but what the OP says leads me to think it was. – Chaworth

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

Inward

+1 because it's exactly what vue-loader does behind the scenes. See my answer if you want to learn a way to solve the issue without this hack ;) – Puentes

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.

Puentes

This is the perfect answer. Thanks! – Maturity

gotcha: you need the component names as used in templates, so if you are following vue/recommended eslint settings you'll need to use VImg: ['src', 'lazy-src'] etc. – Averell

Thansks! also, @MichaelJohnston, I just upgraded to vue-cli 3 and the kebab-case in this answer works for me. – Huron

Answer 3

1. jpg and jpeg was matter to me. Images doesn't load in jpg might work if you give the extention jpeg. (I'm not sure how could that happen, but it worked me a one time)
2. instead of src="@/assets/promo1.jpg" src="src/assets/promo1.jpg" worked me in another case.

Try this things and let us know. =)

Thermochemistry

After a week coding, recoding, seeking for a solution or workaround for this issue I found this. Tried @, ~ and changed everything on the way. So I took a look at your answer and this simple src/... in the very beginnig fixed everything. Thank you! – Coelom