Vue/Vuetify 和绑定 carousel img src 的方法不显示图像答案

【问题标题】：Vue/Vuetify and binding carousel img src with a method not showing imageVue/Vuetify 和绑定 carousel img src 的方法不显示图像
【发布时间】：2018-07-28 04:35:57
【问题描述】：

开始一些 Vue/Vuetify，我想要实现的是从定义的 v-carousel 方法绑定图像 src，但我是空白的。

循环似乎可以工作，我正确地使用了该方法，并从该函数中记录了我希望返回的值，但它根本没有将其显示为图像的源。

  <div v-for="(post, index) in posts" :key="post.images+'_'+index">
    <v-carousel-item>
      <img v-bind:src="getImage(index)" alt="">
    </v-carousel-item>
  </div>
  </v-carousel>

对于我的方法：

getImage (index) {
  butter.content.retrieve(['cardimages'])
    .then((resp) => {
      console.log(resp.data.data.cardimages[index]['images_' + index])
      return resp.data.data.cardimages[index]['images_' + index]
    })
}

在页面 src 中我看到：

img data-v-656039f0="" alt=""

我不确定那是什么意思。我是否基于如何做到这一点？我错过了什么？

【问题讨论】：

你的getImage函数在哪里？它应该在您导出的“方法”中。我也认为您的问题可能是在渲染 vue 后尝试获取图像。为什么不先获取它，将它推送到某个数组，然后在它已经检索到之后绑定它？
谢谢裘德。最终，您引导我找到了答案，基本上不是尝试使用内联方法获取它们，而是我之前应该得到它，然后将其绑定到 src。我很困惑，因为我试图根据 Buttercms“slug”获取图像，所以我认为我应该动态获取它。只需在 Buttercms 内容上使用正确的命名并与帖子 slug 匹配并事先获取帖子和内容，就更容易了。

标签： vue.js vuetify.js

【解决方案1】：

我也遇到了同样的问题 src: require('../assets/hh-home.jpg') 为我工作

【讨论】：

我为这个问题找到的最简单的答案。

【解决方案2】：

最终，Jude 将我引向了正确的方向，应该首先获取内容并从那里绑定，而不是使用方法。这意味着在 butter cms API 中使用正确的命名来匹配 slug 和内容。所以模板改变了：

<div v-for="(cimg, index) in cardimages" :key="post.images+'_'+index">
<v-carousel-item>
<img v-bind:src="cimg[post.slug]" alt="">
</v-carousel-item>
</div>

并且方法改为：

getContent () {
  butter.content.retrieve(['cardimages'])
    .then((resp) => {
      this.cardimages = resp.data.data.cardimages
    })
}

当然还有在创建时加载：

  created () {
    this.getPosts()
    this.getContent()
  }

【讨论】：

很高兴能帮上忙！

【解决方案3】：

用你的图片试试这个：

<img :src="import(getImage(index)) alt="">

【讨论】：

尝试这个会导致编译失败，原因是：“避免使用 JavaScript 关键字作为属性名称：“import””
啊，所以使用 require 而不是 important。