带有 :src 的 VUE 图像在第一次渲染时不显示答案

【问题标题】：VUE Image with :src doesnt show up on first rendering带有 :src 的 VUE 图像在第一次渲染时不显示
【发布时间】：2019-10-24 21:20:21
【问题描述】：

您好，我的头像组件出现问题，我从存储在我的 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 ，但这也不起作用。感谢您的帮助

【问题讨论】：

test: data: () => ({ avatar: '' }) created () { this.avatar = this.getAvatarUrl() }
@HamiltonGabriel 现在试过了，即使我导航到另一条路线，图像也根本不会加载:(

标签： javascript firebase vue.js firebase-storage

【解决方案1】：

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

您只需要改用computed property：

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

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

【讨论】：