Javascript 带有：src的VUE图像不会在第一次渲染时显示

您好，我的avatar组件遇到了一个问题，我从vuex商店中储存的url加载的图像在第一次渲染时不会显示，只在第二次渲染时显示

这是我的化身组件

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

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

来自化身组件的图像不会在第一次渲染时渲染， 我得走另一条路线，回来看看。 我试图用：key在所有生命周期挂钩上强制重新加载，并使用这个。$nexttick，但这不起作用。

---

感谢您的帮助

这是因为在请求完成之前，存储区不包含图像路径，请求可能在DOM和组件呈现之后完成

您只需使用以下选项：

导出默认值{
计算：{
阿瓦塔鲁尔（）{
返回此。$store.state.user.userAvatarUrl
}
}
}

test:data:（）=>（{avatar:'}）created（）{this.avatar=this.getAvatarUrl（）}@hamiltonagariel现在就尝试了，即使我导航到另一条路线，图像也不会加载：(

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

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

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