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> 

export default {
    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-col
      v-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-col v-text="testimonial.title"></v-col>
        <v-card-subtitle v-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-img height="200px" v-bind:src="item.image" />