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

Vuetify issue - why doesn't the v-img component display anything despite the image being passed in from a valid source?

提问by RIGB

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.

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

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

另一个问题提到了一个类似的问题，有人建议 v-img 我不适用于过时的浏览器：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.

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

这是上述组件的 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;
}

回答by Anson Low.Z.F

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

希望对你有帮助

回答by JTInfinite

I have also used require in my components data property, which works:

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

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

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

回答by Mirza Andriamanamisoa

You have to use requirefor relative image paths, because Vue loader doesn't do that automatically for custom components.

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

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

Explanation in Vuetify FAQ

Vuetify FAQ 中的解释

回答by Debu Shinobi

<v-img
      class="secondaryFont--text"
      height="300"
      src="item.avatar"
      alt=""
      >

Here, instead of just src, you should be using :src. Note: :srcis know as bounded attribute.

在这里，src您应该使用，而不仅仅是:src。注意：:src被称为有界属性。

P.S.: If you paste the code of scripttag it would be more convenient to help you.

PS：如果贴上scripttag的代码，会更方便帮到你。