Vue / Vuetify 从 api 动态绑定图像

Question

我想将图像动态绑定到我的<v-img> 组件。

<template>
  <v-img
    id="image"
    :src=backgroundImage
    aspect-ratio="1"
    class="grey lighten-2"
  >
  </v-img>
</template>

在我的脚本中，我正在加载一个默认图像，在调用挂载方法中的路由时，它会随机为我提供来自服务器的图像。该请求有效，我成功获得了一个有效的图像网址。 但我无法将其绑定到我的图像 src。

<script>
export default {
  data: () => {
    backgroundImage: 'https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg'
  },

  mounted () {
    setBgImg();
  },

  methods: {
    // get random background image 
    async setBgImg() {
      const route = 'http://localhost:4000/api/image/random';
      const { data } = await axios.get(route);

      this.backgroundImage = data[0].image;
    }
  }
}
</script>

编辑忘记粘贴错误信息，这里是：

> Cannot use 'in' operator to search for 'backgroundImage' in undefined

Answer 1

有些东西需要更新。

vue中第一个数据需要返回一个对象：

    export default {
        data: () => ({
        backgroundImage: ''
    }),

其次，您需要使用this 调用setBgImg() 方法：

      mounted () {
        this.setBgImg();
      },

之后，您应该能够从 api 显示给定的图像：

      <v-img
        id="image"
        :src="backgroundImage"
        aspect-ratio="1"
        class="grey lighten-2"
      >

Answer 2

如果您从 Chrome 开发工具的控制台检查，您应该会看到一些基于上述代码的错误，即 this.backgroundImage 未定义

data()方法应该返回一个对象

data () {
    return {
       backgroundImage: 'https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg'
    }
}