动态图像无法正确显示 Firebase 存储

问题描述

我想为我网站上的每个新用户设置默认的个人资料图片，如果他们愿意，他们可以更改图片。

当用户在我的商店中注册一个函数时，它会运行它设置用户数据和默认的个人资料图片，用户将被发送到他的个人资料页面并会看到默认的个人资料图片，但由于某种原因图像不显示正确，但是当我在设置默认值后将其更改为其他图片时，它确实有效。

我使用 nuxt.js 框架，我在这里使用的是 store、firebase 存储和 vue.js。

我尝试调试它，但我能找到的唯一错误是没有设置 users/uid/profile.jpg。

无论如何这是我的代码，我商店中的 index.js：

async register({ commit },account) {
        try {
            await auth.createuserWithEmailAndPassword(account.email,account.password);
            const token = await auth.currentUser.getIdToken();
            const { email,uid } = auth.currentUser;

            Cookie.set('access_token',token);

            commit('SET_USER',{
                email,uid
            });
            //here is where i set the default profile picture
            firebase.storage().ref('users/'+uid+'/profile.jpg').put('https://www.datocms-assets.com/40056/1613754116-blank-profile-picture-973460640-e1561803510819.png')
            this.$router.push('profiel')
                })
        } catch(err) {
            throw err
        }
    },

这是我的个人资料页面：

data() {
        return {
            profielfoto: 'https://www.datocms-assets.com/40056/1613754116-blank-profile-picture-973460640-e1561803510819.png',file: {},changeImage: false
        }
    },methods: {
        async chooseFile(e) {
            // choose file this works
            try {
                this.file = e.target.files[0]
                firebase.storage().ref('users/'+this.$store.state.users.user.uid+'/profile.jpg').put(this.file).then(function() {
                    console.log(this.file)
                }).catch(error => {
                    throw error
                });
                firebase.storage().ref('users/'+this.$store.state.users.user.uid+'/profile.jpg').getDownloadURL().then(imgurl => {
                    this.profielfoto = imgurl
                })
            } catch(err) {
                throw err
            }
        },},mounted() {   
//load  the image that was set
 firebase.storage().ref('users/'+this.$store.state.users.user.uid+'/profile.jpg').getDownloadURL().then(imgurl => {
            this.profielfoto = imgurl
        })
    }

我将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）