Vuetify 问题 - 尽管图像是从有效来源传入的，为什么 v-img 组件不显示任何内容？

Question

在 v-card-media 贬值以支持 v-img 之前，我在夏天早些时候写了这段代码。据我所知，我正确地使用了 v-img 并通过指定的 src 道具传入了我的源代码。

另一个问题提到了类似的问题，有人建议 v-img my not work with outdated browsers： Vuetify v-img component not loading images

我有最新版本的 firefox 和 chrome，并且 v-img 在这两种情况下都不会显示链接的图像。我知道信息正在传递，因为所有其他数据都显示得很好。我想知道这可能是链接的安全性问题，还是与我忽略的链接有关的一些配置问题。有人在某处提到（我现在忘了在哪里）vue 在从自定义组件的相关链接加载图像时出现问题，但我传入的链接使用的是 http.此外，我传递的图像在列表组件的头像拼贴中显示良好，因此我认为该问题与 v-img 特别相关。

尽管如此，我对发生的事情一无所知。我在下面粘贴了相关代码。如果有人对此有所了解，将不胜感激。

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

这是上述组件的 css 代码：

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

原文由 RIGB 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这就是我解决问题的方法，

 <v-img :src="require('item.avatar')" aspect-ratio="1"></v-img>

它应该正确显示图像

希望对你有帮助

原文由 Anson Low.Z.F 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我还在我的组件数据属性中使用了 require ，它有效：

 <template>
    <v-img :src="myImage"></v-img>
</template>

export default {
    data () {
        return {
            myImage: require('@/path/to/image')
        }
    }
}

原文由 JTInfinite 发布，翻译遵循 CC BY-SA 4.0 许可协议