Vue.js - 无效的道具：道具“src”的类型检查失败。预期的字符串，对象，得到了 Promise答案

【问题标题】：Vue.js - Invalid prop: type check failed for prop "src". Expected String, Object, got PromiseVue.js - 无效的道具：道具“src”的类型检查失败。预期的字符串，对象，得到了 Promise
【发布时间】：2021-05-19 17:26:56
【问题描述】：

我正在尝试将图像插入到我的 firebase 的 firestore 和存储中并将其显示在 v-card 上

我的 v-card 代码：

<v-row>
  <v-col cols="3" v-for="massage in massages" :key="massage.id">
  <v-card
      class="mx-auto"
      max-width="400"
    >
      <v-img
      v-if="massage.image"
        class="white--text align-end"
        height="200px"
        :src="massage.image"
      >
        
      </v-img>
      <v-card-title>{{massage.title}}</v-card-title>

      <v-card-text class="text--primary">
        <div>{{massage.shortDescription}}</div>

      </v-card-text>

      <v-card-actions>
        <v-btn
          color="orange"
          text
          @click="goTodetail(massage.id)"
        >
          Explore
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-col>
</v-row>

我的脚本：

<script>
import{ db, storage} from '@/firebase.js';

  export default {
    el: '#vue',
    name: 'BaseHeading',

   // massId:this.$route.params.Pid,
     

    components: {
      BaseInfoCard: () => import('@/components/base/InfoCard'),
    },
    data() {
      return{
      massages:[],
      showmassage: false,
      showrehabilitation: false,
      showsupport: false,
      modal_1: true,
      modal_2: false,
      modal_3: false,

     
      }
    },
    created() {
      try{
        db.collection("massages").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          let img = ''
          if(doc.data().image){
            img = storage.ref().child(doc.data().image).getDownloadURL()
          }

        this.massages.push({
            id: doc.id,
            title: doc.data().title,
            shortDescription: doc.data().shortDescription,
            image: img
        })

        })
    });
    }catch(e){
      console.log(e)
    }
    },

   

  }
</script>

我认为它提供了承诺，但无法弄清楚如何处理它。错误是无效的道具：道具“src”的类型检查失败。预期的字符串，对象，得到了 Promise。我尝试将以下内容放入道具中：

props: {
      src: [ String, Object],
    },

但我仍然有同样的错误

【问题讨论】：

标签： firebase vue.js google-cloud-firestore vuetify.js firebase-storage

【解决方案1】：

在检索图像 URL 时解析 Promise，然后将其传递到 massage 对象。

created() {
  try {
    db.collection('massages')
      .get()
      .then((querySnapshot) => {
        querySnapshot.forEach(async (doc) => {
          // start pertinent change

          if (doc.data().image) {
            storage
              .ref()
              .child(doc.data().image)
              .getDownloadURL()
              .then((url) => {
                this.massages.push({
                  id: doc.id,
                  title: doc.data().title,
                  shortDescription: doc.data().shortDescription,
                  image: url,
                })
              })
          } else {
            this.massages.push({
              id: doc.id,
              title: doc.data().title,
              shortDescription: doc.data().shortDescription,
            })
          }

          // end pertinent change
        })
      })
  } catch (e) {
    console.log(e)
  }
}

【讨论】：