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

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

另一个问题提到了一个类似的问题，有人建议v-img my不能使用过时的浏览器：

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

---

这就是我解决问题的方法

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

它应该正确显示图像

---

希望它能帮助您

您必须使用

require

来获取相对映像路径，因为Vue loader不会自动为自定义组件执行此操作

---

我还在我的组件数据属性中使用了require，该属性可以工作：

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

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

导出默认值{
数据（）{
返回{
myImage:需要（“@/path/to/image”）
}
}
}

在这里，您应该使用

：src

，而不仅仅是

src

。 注意：

：src

被称为有界属性

---

注意：如果您粘贴

脚本的代码

标签，将更方便地帮助您。

仅供记录，如果将来有人遇到与我相同的问题：

如果尝试在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>

---

我认为vue对img文件夹中的所有图像文件都有绝对路径。 这对我有用

相对来说，我们认为

---

我刚刚遇到了同样的问题，但我使用v-bind解决了这个问题。有关vuejs和v-bind的更多信息，请使用

---

Nuxt.js集成了一种更好的方法来完成/修复此问题。有关此问题的更多信息，请查看

但现在配置更简单，也不那么混乱（'因为您不需要真正理解webpack）

---

这是Vuetify案例中的解决方案，希望能有所帮助。

它不应该是绑定的

src

属性，即

：src=“item.avatar”

@Phil您完全正确。但是，在添加之后，它仍然不会显示任何内容。您的浏览器控制台会怎么说？有错误吗？网络控制台将向您显示它试图加载的图像URL哇，我不敢相信我错过了。“未知自定义元素：-您是否正确注册了组件？”结果是我忘了将vuetify更新到他们引入v-img的补丁中！谢谢你向我指出这一点。我可以发誓我更新了所有的lol。将第一个v-img添加到模板不是被动的，它将失败，出现“未知自定义元素：”但在重新加载页面后，它应该可以正常工作

aspect ratio=“1”

是它在Firefox中显示的原因（仅设置宽度）。太棒了。谢谢

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

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

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

<v-img height="200px" v-bind:src="item.image" />

export default {
  build: {
    extend(config, { isClient, loaders: { vue } }) {
      // Extienda solo la configuración de Webpack para el paquete de cliente
      if (isClient) {
        vue.transformAssetUrls.video = ['src', 'poster'],
        vue.transformAssetUrls['v-img']= ['src', 'blank-src']
      }
    }
  }
}