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 designated src prop.

Another question mentioned a similar problem and someone suggested that v-img my not work with outdated browsers: Vuetify v-img component not loading images

I have the latest version of firefox and chrome and v-img will not display the linked image in either case. I know the information is being passed through, because all of the other data is displaying just fine. I wonder if it may be an issue with the security of the link or perhaps some configuration issue to do with links I've overlooked. Someone mentioned somewhere (I forget where now) that vue has issues loading images from relative links for custom components, but the links I'm passing in are using http. Furthermore, the images I'm passing in display fine in the avatar tile of a list component, so I believe the issue is specifically related to v-img.

All the same, I'm a clueless to what's going on. I've pasted the relative code below. If anyone has some insight into this that would be highly appreciated.

    <template>
<div id="eventCard">
      <v-container fluid grid-list-xl pb-0 grid-list-lg grid-list-md grid-list-xs>
        <v-layout row wrap>
          <v-flex
            v-for="item in shows"

            class="xs12 sm6 md4 xl4"
          >
           <v-card flat>
              <v-img
                class="secondaryFont--text"
                height="300"
                src="item.avatar"
                alt=""
              >
                <v-container fill-height fluid>
                <v-layout fill-height max no-margin>
                  <v-flex xs12 align-end flexbox max no-padding>
                        <v-container class="banner max">
                          <v-layout xs12 row>
                              <v-flex xs12 md9 v-if="item.title && item.acts" class="title">
                                  <span class="clip-text">
                                    {{item.title}}
                                    <span>(</span>
                                    <span v-if="item.acts" v-for="(act, index) in item.acts">
                                        <span>{{act.name}}</span><span v-if="index+1 < item.acts.length">, </span>
                                    </span>
                                    <span>)</span>
                                  </span>
                              </v-flex>
                              <v-flex hidden-sm-and-down xs3 text-xs-right>
                                  <span v-if="item.price" v-html="item.price" class='headline clip-text'></span>
                              </v-flex>
                          </v-layout>
                      </v-container>
                  </v-flex>
                </v-layout>
                </v-container>
              </v-img>
              <v-card-text class='primaryFont--text'>
                <div>
                  <span v-if="item.genre" v-html="item.genre"></span>
                      <span v-if="item.doors"> — Doors @ {{item.doors}}</span>
                      <span v-if="item.age"> ({{item.age}}+)</span>
                      <span v-if="item.location"> — {{item.location}}</span>
                  <br>
                  <span v-if="item.date" v-html="item.date"></span>
                </div>
              </v-card-text>
            </v-card>
        </v-flex>
      </v-layout>
    </v-container>

This is the css code for the above component:

.md-active {
    background-color: red;
}

.center {
    display: flex;
    justify-content: center;
    text-transform: capitalize;
}

.banner {
    margin-top: 0px;
    background-color: rgba(0, 0, 0, .6);
}

.clip-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flow-root;
}

.max {
    max-width: 100%;
}
.card__media__content {
    max-width: 100%;
}

.card {
    cursor: pointer;
}

.no-padding {
    padding: 0px !important;
}

.no-margin {
    margin: 0px !important;
}

回答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

回答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')
        }
    }
}

回答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

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

回答5:

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

回答6:

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" />

来源：https://stackoverflow.com/questions/53112247/vuetify-issue-why-doesnt-the-v-img-component-display-anything-despite-the-ima