javascript - 带有 :src doesnt show up on first rendering 的 VUE 图像

Question

你好，我的头像组件出现问题，我从我的 vuex 商店中存储的 url 加载的图像没有出现在第一次渲染中，只出现在第二次渲染中。

这是我的头像组件

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

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

下面是我如何从 App.vue 提交我的商店中的图像 url:

  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 强制重新呈现所有生命周期 Hook 并使用 this.$nexttick 但这也不起作用。 感谢您的帮助

Answer 1

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

你只需要使用 computed property相反:

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

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