Vue.js - Invalid prop: type check failed for prop "src". Expected String, Object, got Promise

Question

I'm trying to get an image inserted into my firebase's firestore and storage and display it on a v-card

my v-card code:

<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>

my script:

<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>

I think it provides promise but cannot figure out how to deal with it. The error is Invalid prop: type check failed for prop "src". Expected String, Object, got Promise. I tried to put the following in the props:

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

but I still have the same error

selfagency · Accepted Answer · 2021-02-16 20:30:39Z

Resolve the Promise when retrieving the image URL, before you pass it into your massage object.

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

Collectives™ on Stack Overflow

Vue.js - Invalid prop: type check failed for prop "src". Expected String, Object, got Promise

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related