VueJS + Firebase 如何显示图像？答案

【问题标题】：VueJS + Firebase How do I display an image?VueJS + Firebase 如何显示图像？
【发布时间】：2020-02-01 11:04:59
【问题描述】：

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

[任务]

从 URL 获取 id (... /: id)
从 Firestore 获取图片网址
文档名称 = id
查看图片

<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>

【问题讨论】：

标签： javascript firebase vue.js google-cloud-firestore

【解决方案1】：

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

【讨论】：

请注意data 是一种方法而不是属性，请参阅firebase.google.com/docs/reference/js/…。因此，您需要执行 doc.data() 以“将文档中的所有字段作为对象检索”。然后您必须分配其中一个字段的值，例如 this.imageurl = doc.data().imageurl;
确实如此。我已经完成了答案。谢谢@RenaudTarnec
@cccn 谢谢。我能够得到网址。但是，出现Error getting document TypeError: Cannot set property 'imageurl' of undefined。我以为imageurl 可以存储在`data`中，但似乎没有
@kan 输入console.log(doc.data()) 看看你得到什么回应
@cccn 确认 url 保存在 doc.data() 中。

【解决方案2】：

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

【讨论】：

【解决方案3】：

以下应该有效：

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 实例”。

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

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

【讨论】：

谢谢，这对我有用。并加深了我的理解