Javascript VueJS+；Firebase如何显示图像？

我想显示存储在Firebase中的图像，但它不起作用。当前，访问页面时不显示任何内容。错误在哪里

[任务]

从URL获取id（…/：id）

从Firestore获取图像url
　　文档名称=id

查看图像

从“firebase”导入firebase；
var db=firebase.firestore（）；
导出默认值{
数据（）{
返回{
imageurl:“
};
},
安装的（）{
const id=this.$route.params.id；
设cityRef=db.collection（“cards”）.doc（id）；
让getDoc=cityRef.get（）；
this.imageurl=getDoc；
}
};

cityRef.get（）

返回一个承诺，所以您应该这样获得图像：

cityRef.get().then(function(doc) {
 if (doc) {
  console.log(doc.data()) // doc.data() is a response from your query
  this.imageurl = doc.data().imageurl
 } else {
  console.log('no data')
 }
} catch(error) {
...
}

---

您需要更改语法以加载firebase并获取文档：

import firebase from 'firebase/app'
import firebaseConfig from './config/firebase' .  // Your firebase config init settings.
...

db.collection('cards').doc(id)
.get().then(docSnapshot => {
    if (!docSnapshot.exists) return;
    let data = docSnapshot.data()
    // continue your code
});

---

PS：我看到你在使用新的Vuetify 2，太棒了

以下方法应该有效：

mounted() {
    const id = this.$route.params.id;
    const cityRef = db.collection("cards").doc(id);

    cityRef.get().then(doc => {
        if (doc.exists) {
            console.log(doc.data()) 
            this.imageurl = doc.data().imageurl
        } else {
            console.log('no data')
        }
    })
    .catch(error => {
        //.....
    }
}

如中所述，由于“您使用的是关键字

函数

，

此

在匿名函数的范围内，而不是vue实例”

通过使用箭头函数，您将解决该错误

---

---

另请参阅我对另一个答案所做的评论：通过调用异步方法，您可以得到一个承诺，“使用包含当前文档内容的方法进行解析”。在

DocumentSnapshot

上，必须调用方法“将文档中的所有字段作为对象检索”。然后您必须为其中一个字段赋值，比如

this.imageurl=doc.data（）.imageurl
请注意，
数据
是一种方法而不是属性，请参阅。因此，您需要执行
doc.data（）
以“将文档中的所有字段作为对象检索”。然后您必须为其中一个字段赋值，比如
this.imageurl=doc.data（）.imageurl确实如此。我已经完成了答案。多谢各位@RenaudTarnec@cccn非常感谢。我能够得到网址。但是，
获取文档类型时出错错误：无法设置未定义的属性“imageurl”。我原以为
imageurl
可以存储在'data'中，但事实并非如此seem@kan键入console.log（doc.data（））并查看您需要的响应get@cccn已确认url存储在doc.data（）中。谢谢，这对我很有用。加深了我的理解
mounted() {
    const id = this.$route.params.id;
    const cityRef = db.collection("cards").doc(id);

    cityRef.get().then(doc => {
        if (doc.exists) {
            console.log(doc.data()) 
            this.imageurl = doc.data().imageurl
        } else {
            console.log('no data')
        }
    })
    .catch(error => {
        //.....
    }
}