Question

我想显示存储在Firebase中的图像，但是它不起作用。目前，访问该页面时什么也没有显示。错误在哪里？

[任务]
1.从URL（... /：id）获取ID
2.从Firestore获取图像网址
文件名称= id
3.查看图片

<template>
  <v-container>
    <v-row align="center" justify="center">
      <v-col cols="12" md="8" xs="12">
        <img :src="imageurl" />
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import firebase from "firebase";
var db = firebase.firestore();

export default {
  data() {
    return {
      imageurl: ""
    };
  },
  mounted() {
    const id = this.$route.params.id;

    let cityRef = db.collection("cards").doc(id);
    let getDoc = cityRef.get();
    this.imageurl = getDoc;
  }
};
</script>

Answer 1

以下方法应该起作用：

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 - Cannot set property of undefined in promise中所述，由于“您正在使用关键字function，因此this在其作用域内是匿名函数，而不是vue实例”。

使用箭头功能可以解决该错误。

另请参见我对另一个答案的评论：通过调用异步get()方法，您将获得一个Promise，它“使用包含当前文档内容的DocumentSnapshot进行解析”。在DocumentSnapshot上，您必须调用data()方法以“将文档中的所有字段作为对象检索”。然后，您必须分配这些字段之一的值，例如this.imageurl = doc.data().imageurl;

Answer 2

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) {
...
}

您有documentation

Answer 3

您需要更改语法以加载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，太棒了！

VueJS + firebase如何显示图像？

3 个答案: