<v-card-media> images are not proccess in Vue Loader with "npm run build"

Hi! i’ve deploy my aplicacion with npm run build of Vue Loader, but I see that the image in the v-card-media component is not processed unlike other tags “img”,etc Code Scalfolding npm run build

Sorry for my english! 😃

[vwxyzjn]

I believe @jyacot wants to do relative URLs static assets imports. Usually, relative URLs are automatically enabled. For example, in the official vuejs template we can see

<img src="./assets/logo.png">

According to the vue-loader’s documentation, the markup above is actually translated to

createElement('img', { attrs: { src: require('../image.png') }})

which is something VCardMedia.js doesn’t have. It simply uses whatever url you passed into src prop of v-card-media component

style: {
  background: `url(${this.src}) center center / ${this.contain ? 'contain' : 'cover'} no-repeat`
}

If you want a quick fix however, try

v-card-media(
  class="white--text"
  :src="require('@/assets/yourimages.jpg')"
  height="200px"
)

This solved my problem.

@johnleider I believe this is a common gotchas since vue-template encourages you to use relative imports (see Handing Static Assets). Would you consider adding it to the official Frequently asked questions | Vuetify?

[vwxyzjn]

@johnleider Check out this minimal reproduction: v-card-media_relative_import.

Review especially these lines

And the result looks like this:

Notice directly using relative import on <v-card-media> doesn’t work the same way <img> does. In <img>, you can write:

<img src="./v.png"/>

while for <v-card-media> you need to write

<v-card-media v-bind:src="require('./v.png')" height="200px">
<!-- <v-card-media src="./v.png" height="200px"> does not work -->