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

[jyacot]

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! :)

[johnleider]

When creating an issue you should be provided with boilerplate for the ticket. This is important for myself and others to properly address your issue. Please reopen this with the required information, thank you.

[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?

[jyacot]

Thank you very much @vwxyzjn !!! It worked perfectly!

[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 -->

[Imanullah]

Hai to use for dynamic image

is not working....

[RichAyotte]

@Imanullah Have your tried :src="require('/path/to/yourimage.jpg')"

[johnleider]

I'm not really sure how to solve this due to how vue-loader works. Any help is welcome

[johnleider]

I've added the information to the FAQ.

[chickdan]

Hate to open this back up, but I'm unable to get this fix working with dynamically populating the src attribute. In my code I'm looping through an array and using :src="require(card.src)" to assign the v-card-media and I'm getting this warning: 1:499-516 Critical dependency: the request of a dependency is an expression. Because of this nothing renders.

[vwxyzjn]

@chickdan I am pretty sure the require function is evaluated at compile time, and you can use it during runtime. That's why you have the error.

[DanilChugaev]

@johnleider what do you think about this method: Question in stackoverflow "Vue.js dynamic images not working" ? Other methods not working for me, but, this method is worked.

For example, in my component it looks like this:

<template>
   ...
   <v-card v-for="card in widgetCards">
      <v-card-media :src="getImgUrl(card.img)"> 
      ...
      </v-card-media>
   </v-card>
   ...
</template>


<script>
   ...
   data () {
    return {
           widgetCards: [
        { text: 'example-1', img: '1.jpg' },
        { text: 'example-2', img: '2.jpg' },
        { text: 'example-3', img: '3.jpg' }
    ]
   },
   methods: {
    getImgUrl(img) {
        return require('../../assets/img/' + img)
    }
   }
   ...
</script>

[jacekkarczmarczyk]

This method is mentioned in Vuetify FAQ

[DanilChugaev]

@jacekkarczmarczyk But dynamically, this method (in FAQ) not working. At least, it does not work for me.

[jacekkarczmarczyk]

Could you then please create an issue in docs repo to update the FAQ? Thank you

[mbengchan]

Hello guys am having the same problem but mine am providing a full image link from an api end-point: http://localhost:8000/storage/blogs/Test Blog.jpg in the using a loop. but the image doesn't display but it works on

[prodigy2m]

This did it for me. "v-bind:src="require('@/assets/yourimage.jpg')" height="100px"

[kevinrodriguez-io]

:src="require('@/assets/'+myDinamycFile)" doesn't even compile for me.

[vwxyzjn]

@kevinrodriguez-io require is evaluated at webpack "compile time", therefore you couldn't use dynamic links.