Vuetify issue - why doesn't the v-img component display anything despite the image being passed in from a valid source?

Question

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

Answer 1

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

Answer 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')
        }
    }
}

Answer 3

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

Answer 4

<v-img
      class="secondaryFont--text"
      height="300"
      src="item.avatar"
      alt=""
      >

Here, instead of just src, you should be using :src. Note: :src is know as bounded attribute.

P.S.: If you paste the code of script tag it would be more convenient to help you.

Answer 5

i think vue has an absolute path to all image files in the img folder. this worked for me <v-img src="img/avater.jpg" /> which relatively suppose to be <v-img src="../../../public/img/avater.jpg" />

Answer 6

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'
        },