Vue / Vuetify 動態綁定來自 api 的圖像

Question

我想將圖像動態綁定到我的<v-img>組件。

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

在我的腳本中，我正在加載一個默認圖像，在掛載的方法中調用一個路由，它隨機給我一個來自服務器的圖像。 該請求有效，我成功獲得了有效的圖像 url。 但我無法將它綁定到我的圖像 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中返回一個object：

    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() 方法應該返回一個 object

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