Question

开始一些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=""

我不确定这是什么意思。我是怎么做的吗？我想念什么？

Answer 1

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

Answer 2

最终，裘德引导我朝着正确的方向发展，应该首先获取内容并从那里进行绑定，而不是使用一种方法。这意味着在butter cms API中使用适当的命名以使块与内容匹配。因此模板已更改：

<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()
  }

Answer 3

使用您的图片尝试一下

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

Vue / Vuetify和绑定轮播img src使用不显示图像的方法

3 个答案: