Vuetify Issue - Why Doesn't The V-img Component Display Anything Despite The Image Being Passed In From A Valid Source?

I wrote this code earlier in the summer before v-card-media was depreciated in favour of v-img. As far as I can see, I'm using v-img correctly and passing in my source through the

Solution 1:

This is how I solve the problem,

<v-img:src="require('item.avatar')"aspect-ratio="1"></v-img>

It's should display the image correctly

Hope it help you

Solution 2:

I have also used require in my components data property, which works:

<template>
    <v-img:src="myImage"></v-img>
</template> 

exportdefault {
    data () {
        return {
            myImage: require('@/path/to/image')
        }
    }
}

Solution 3:

You have to use require for relative image paths, because Vue loader doesn't do that automatically for custom components.

<v-img:src="require(item.path)" />

Explanation in Vuetify FAQ

Solution 4:

just for the record if anyone have the same problem as me in the future:

if you are trying to use the v-image in a v-for loop the code should look like this:

<v-colv-for="(testimonial, i) in testimonials":key="i"cols="12"md="4"
    ><v-card:id="testimonial.title"><v-img:src="require(`../assets/img/${testimonial.src}`)"></v-img><v-colv-text="testimonial.title"></v-col><v-card-subtitlev-text="testimonial.description"></v-card-subtitle></v-card></v-col>

use the fixed part of the path as a string in the require() and just the image as a variable. data properties should look like:

testimonials: [
        {
          src: 'testimonials-1.jpg',
          title: 'Some name',
          description: 'Lorem ipsum'
        },
        {
          src: 'testimonials-2.jpg',
          title: 'Some name',
          description: 'Lorem ipsum'
        },

Solution 5:

I just had the same issue, but I resolved with using v-bind. For more about vuejs and v-bind, use this video

<v-imgheight="200px"v-bind:src="item.image" />