带有 :src 的 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 强制重新渲染所有生命周期挂钩并使用 this.$nexttick ，但这也不起作用。 谢谢您的帮助

Answer 1

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

您只需要改用计算属性：

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

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