Check if promise is resolved before passing to image src

user_12636797 0
Viewed 1284

I'm trying to asyc load a bunch of logos.

Vue code

<template v-slot:item="{ item }">
    <v-list-item-avatar v-if="logo(item.Code, item.Exchange)">
      <v-img :src="logo(item.Code, item.Exchange)"></v-img>
    </v-list-item-avatar>
</template>

JS code

async logo(code, exchange){
      let hostname = window.location.hostname
      let logoURL = `http://${hostname}/backend/logo/${code}.${exchange}`
      let response = await fetch(logoURL)
      let url = await response.json()
      return url
},

Right now I'm getting the error 

[Vue warn]: Invalid prop: type check failed for prop "src". Expected String, Object, got Promise

How do I make it wait till the promise is resolved before displaying the image?

vue.js javascript
1 Answers

The async function always return a Promise object, that's why you have the type check error. To use the returned url of your async function. You can declare a variable and when the async function responses, assign the responses value to that variable:

let urlLogo = "";

logo(item.Code, item.Exchange).then(url => urlLogo = url);
user_88849480
Related