Firebase img未从以下位置加载：src

我从firestore获取图像位置，并希望使用v-bind:src显示图像。您可以在下面找到我的代码：

<b-avatar v-bind:src = "profilepic" class="mr-5" size="8em"></b-avatar>

我确信this.profilepic正在存储正确的路径，就像我手动键入路径一样，它将显示。我怀疑在从firestore检索路径之前加载的页面。我怎样才能解决这个问题？先谢谢你

我尝试过直接对数据的路径进行硬编码，效果很好。代码如下所示：

export default {
    data() {
        return {
            uid: "",
            profilepic: "",
        }
    },
    methods: {
        getprofilepic() {
            fb.storage().ref('users/' + this.uid + '/profile.jpg').getDownloadURL().then(imgURL  => {
                this.profilepic = imgURL;
                alert(this.profilepic); // shows the correct path
            })
        },
    }


    created() {
        this.uid = fb.auth().currentUser.uid;
        this.getprofilepic();
    }

}

 data() {
        return {
            uid: "",
            profilepic: "*my firebase storage path*",
        }
    },

---

有了这些，我真的不知道为什么它不仍然显示

尝试等待uuid被检索：

导出默认值{
数据（）{
返回{
uuid：未定义，
profilepic：未定义
}
},
方法：{
getprofilepic（）{
fb.storage（）.ref（'users/'+this.uid+'/profile.jpg'）。getDownloadURL（）
.然后（imgURL=>{
this.profilepic=imgURL；
})
},
getuuid（）{
返回新承诺（（解决、拒绝）=>{
var user=fb.auth（）.currentUser；
如果（user==null）拒绝（）
if（用户）解析（user.uid）
})
}
},
创建（）{
这个
。然后（uuid=>this.uuid=uuid）
.然后（（）=>{
这个.getprofilepic（）；
})
}
};

---

正如您在本例中所看到的，加载URL所需的时间并不重要：

在模板标记下方的脚本中，您需要确保包含图像，当然，不是放置我的路径，而是放置图像的路径

导出默认值{
数据（）{
返回{
档案：{
我的图片：require（'/src/assets/img/avatars/logo.png'））
}
};
},
}
};

当Vue Loader编译SFCs中的

块时，它还会将遇到的任何资源URL转换为网页包模块请求

例如，以下模板片段：

<img src="../image.png">

默认情况下，将转换以下标记/属性组合，并且可以使用

transformAssetUrls

选项进行配置

{
  video: ['src', 'poster'],
  source: 'src',
  img: 'src',
  image: ['xlink:href', 'href'],
  use: ['xlink:href', 'href']
}

步骤1：创建

vue.config.js

 module.exports = {
  productionSourceMap: false,
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options['transformAssetUrls'] = {
          video: ['src', 'poster'],
          source: 'src',
          img: 'src',
          image: 'xlink:href',
          'b-avatar': 'src',
          'b-img': 'src',
          'b-img-lazy': ['src', 'blank-src'],
          'b-card': 'img-src',
          'b-card-img': 'src',
          'b-card-img-lazy': ['src', 'blank-src'],
          'b-carousel-slide': 'img-src',
          'b-embed': 'src'
        }
        return options
      })
  }
}

步骤2：内部

main.js

import vue.config

import '../vue.config'

步骤3：创建html模板

<template>
  <b-avatar :src="profilepic" class="mr-5" size="8em"></b-avatar>
</template>
<script>
  import { BAvatar } from 'bootstrap-vue'
  export default {
    name: 'bootstrap-image-avatar',
    components: {
      'b-avatar': BAvatar
    },
    data() {
      return {
        uid: "",
        profilepic: "",
      }
    },
    methods: {
      getprofilepic() {
        fb.storage().ref('users/' + this.uid + '/profile.jpg').getDownloadURL().then(imgURL  => {
          this.profilepic = imgURL;
          alert(this.profilepic); // shows the correct path
        })
      },
    }
    created() {
      this.uid = fb.auth().currentUser.uid;
      this.getprofilepic();
    }
  }
</script>

从“引导vue”导入{BAvatar}
导出默认值{
名称：'引导图像化身'，
组成部分：{
“b-阿凡达”：巴瓦塔
},
数据（）{
返回{
uid:“”，
profilepic:“，
}
},
方法：{
getprofilepic（）{
fb.storage（）.ref（'users/'+this.uid+'/profile.jpg'）。getDownloadURL（）。然后（imgURL=>{
this.profilepic=imgURL；
警报（this.profilepic）；//显示正确的路径
})
},
}
创建（）{
this.uid=fb.auth（）.currentUser.uid；
这个.getprofilepic（）；
}
}

hmm我试过使用你的方法，但不起作用。我认为更多的是等待firebase存储路径在加载屏幕之前被检索。有办法吗？谢谢这不应该是问题所在。但是您可以尝试将

v-if

绑定到

上的

profilepic

，如下所示：

v-if=“profilepic.length>0”

我已经用一个示例更新了答案，在这个示例中，加载图像需要1秒的时间，没有问题。当数据发生变化时，img标签会更新。您好@Maria，非常感谢您的帮助。然而，我仍然无法解决它，尽管我相信你的解决方案可能是正确的。由于我正在使用firestore检索图像的路径，我不得不这样做，但它仍然不起作用：@Samuel，希望它能帮助你。试着让我知道。嗨，杰巴苏坦，谢谢你的详细解释。我试过你的解决办法，但还是不管用。我已经尝试将路径直接硬编码到数据中。。例如profilepic:“firebase存储路径”并使用v-bind:src=“profilepic”即可。。所以我认为问题更多的是存储？我也不太确定。嗨@Jebasuthan，我发现了错误，但不确定如何解决这个问题。为了清晰起见，我发布了一个最新版本。可在此处找到链接：

<template>
  <b-avatar :src="profilepic" class="mr-5" size="8em"></b-avatar>
</template>
<script>
  import { BAvatar } from 'bootstrap-vue'
  export default {
    name: 'bootstrap-image-avatar',
    components: {
      'b-avatar': BAvatar
    },
    data() {
      return {
        uid: "",
        profilepic: "",
      }
    },
    methods: {
      getprofilepic() {
        fb.storage().ref('users/' + this.uid + '/profile.jpg').getDownloadURL().then(imgURL  => {
          this.profilepic = imgURL;
          alert(this.profilepic); // shows the correct path
        })
      },
    }
    created() {
      this.uid = fb.auth().currentUser.uid;
      this.getprofilepic();
    }
  }
</script>