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)" />
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" />
Post a Comment for "Vuetify Issue - Why Doesn't The V-img Component Display Anything Despite The Image Being Passed In From A Valid Source?"