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

Question

我在夏天早些时候编写了这段代码，然后v-card-media因v-img而贬值了。据我所知，我正确地使用了v-img，并通过指定的src属性传递了源代码。

另一个问题提到了类似的问题，有人建议v-img无法与过时的浏览器一起使用：Vuetify v-img组件未加载图像

我拥有最新版本的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;
}

Answer 1

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

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

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

Answer 2

这就是我解决问题的方式

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

它应该正确显示图像

希望对你有帮助

Answer 3

您必须使用require相对图像路径，因为 Vue 加载器不会自动为自定义组件执行此操作。

<v-img :src="require(item.path)" />

Vuetify FAQ 中的说明

Answer 4

仅供记录，如果以后有人遇到和我一样的问题：

如果您尝试在 v-for 循环中使用 v-image，代码应如下所示：

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

在 require() 中使用路径的固定部分作为字符串，仅将图像作为变量。数据属性应如下所示：

testimonials: [
        {
          src: 'testimonials-1.jpg',
          title: 'Some name',
          description: 'Lorem ipsum'
        },
        {
          src: 'testimonials-2.jpg',
          title: 'Some name',
          description: 'Lorem ipsum'
        },