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;

}