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

Posted 2023-02-22

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

【英文标题】：Vue.js - Invalid prop: type check failed for prop "src". Expected String, Object, got 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-
    >
      <v-img
      v-if="massage.image"
        class="white--text align-end"
        
        :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],
    ,

但我仍然有同样的错误

【参考方案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)