(vue)firebase storageから取得した画像をimgタグ内で表示したいのですがうまく表示されません

###困っていること
firebase storageにアップロードされている画像をvue.jsで取得し、imgタグ内で表示したいのですがうまく表示されません。
console.logで取得結果を見ると確かに画像のパス等は取れているみたいなのですがログにはPromise {<pending>}と表示され、うまくimgタグ内で表示できないです。
stoarage.jsに取得メソッドを記載async awaitを使い処理が終えたら値を返す様にしています。
それをvueファイルで呼び出し、取得したらuploadImageUrlというプロパティに文字列として格納し、imgタグ内でsrcを指定し表示した為のですが、参考画像の様にpendingと記載されており、文字列としてプロパティに格納できていないみたいです。

promise resultにはしっかり画像のフルパスが入っているので取得方法自体は間違いではなさそうなのですが、何がいけないのでしょうか？またfullfilledというステータスになってはいます。

このpromise resultのvalueを取りたいだけなのですが苦戦しており、promiseに対する理解が不足しているので、非同期周りの書き方がまずいのかなと思っております。
以下がコードになります。

ソースコード

//image.vue
<template>
  <v-app >
    <v-card class="mx-auto" max-width="344">
        <v-img v-if="uploadImageUrl" :src="this.uploadImageUrl" height="200px"></v-img>
    </v-card>
  </v-app>
</template>

<script>
import { download } from '../src/plugins/storage.js'
export default{
    data: function() {        
        return{
            uploadImageUrl: "",
        }
    },
    components: {　
    },
    mounted: function() {
　　　　　　　　　　　　　　　　　axios
            .get('hoge)
            .then((response) => {
            })
            .catch(error => {
                alert(error);
        })
　　　　　　　　　　　　　　　//↑省略しておりますが画像取得とは別にaxiosでの通信処理が走っています

　　　　　　　　　　　　　　　　var image = download("aaa"); //aaaというファイルを取得
        console.log(image);
        this.uploadImageUrl = image;
    }
}
</script>

//storage.js
export async function download (title) {
    const imageURL = `test/${title}`
    return await firebase.storage().ref().child(imageURL).getDownloadURL(
      function(error) {
        if (!error) {
          alert('画像のダウンロードに失敗しました');
          console.log(error)
        } else {
          console.log("ダウンロードに成功しました")
        }
      }
    )
  }

以上ご回答いただけると幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

download()はasync functionでPromiseが返ってくるため、awaitをする必要があるかと思います。

js
1    mounted: function() {
2　　　　　　　　　　　　　　　//省略
3
4　　　　　　　　　　　　　　　　var image = download("aaa"); //aaaというファイルを取得
5　　　　　　　　　　　　　　　//省略
6    }

の箇所にasyncとawaitを付けて、

js
1    mounted: async function() {
2　　　　　　　　　　　　　　　//省略
3
4　　　　　　　　　　　　　　　　var image = await download("aaa"); //aaaというファイルを取得
5　　　　　　　　　　　　　　　//省略
6    }