VUE Изображение с: src не отображается при первом рендеринге

Question

Здравствуйте, у меня проблема с компонентом аватара, изображение, которое я загружаю с URL-адреса, хранящегося в моем магазине vuex, не отображается при первом рендеринге, а только при втором.

вот мой компонент аватара

<template>
   <img :src="getAvatarUrl()"/>
</template>

<script>
export default {
 methods: {
   getAvatarUrl() {
     return this.$store.state.user.userAvatarUrl
   }
 }
}
</script>

вот как я фиксирую URL изображения в моем магазине из App.vue:

  created() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        let avatarRef = firebase.storage().ref().child(`avatars/${this.$store.state.user.displayName}`)
        avatarRef.getDownloadURL().then(url => {
          this.$store.commit('userAvatarUrl', url)
        })
      }
   })
}

Это изображение из компонента аватара не отображается в первый раз, Я должен пройти по другому маршруту и ​​вернуться, чтобы увидеть его. Я попытался принудительно выполнить рендеринг на всех хуках жизненного цикла с помощью: key и использовал this. $ Nexttick, но это тоже не сработало. Спасибо за помощь

Answer 1

Это связано с тем, что хранилище не содержит путь к изображению до тех пор, пока запрос не будет завершен, и, скорее всего, запрос будет завершен после DOM и вашего компонента отрендерено.

Вам просто нужновместо этого использовать вычисляемое свойство :

<template>
   <img :src="avatarUrl"/>
</template>

<script>
export default {
 computed: {
   avatarUrl() {
     return this.$store.state.user.userAvatarUrl
   }
 }
}
</script>