VueJS + firebase Как отобразить изображение?

Question

Я хочу отобразить изображение, хранящееся в FireBase, но оно не работает. В настоящее время при доступе к странице ничего не отображается. Где ошибки?

[Задача]
1. Получить идентификатор из URL (... /: id)
2. Получить URL-адрес изображения из пожарного магазина
Имя документа = 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 - Невозможно установить свойство undefined в обещании , так как "вы используете ключевое слово function, thisнаходится внутри области действия анонимной функции, а не экземпляра vue ".

Используя функцию стрелки, вы исправите ошибку.

---

См. также комментарии, которые я сделал надругой ответ: вызывая асинхронный метод get(), вы получаете Обещание, которое «разрешается с помощью DocumentSnapshot, содержащего текущее содержимое документа». На DocumentSnapshot необходимо вызвать метод data(), чтобы «извлечь все поля в документе как объект». Затем вам нужно присвоить значение одному из этих полей, например this.imageurl = doc.data().imageurl;

Answer 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, отлично!

Answer 3

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

Там у вас есть документация