时间戳

首页 > 解决方案 > 如何在 vuetify 和 firebase 中使用 v-for 动态添加图像

firebase - 如何在 vuetify 和 firebase 中使用 v-for 动态添加图像

问题描述

我正在尝试使用来自 firebase 存储的动态加载图像（我从 firestore 获取 URL 并存储在数组中）。

但两者都:src='require("user.documents.selfie.url")'不起作用:src='user.documents.selfie.url'。我已经尝试了大量的 stackoverflow 答案，但没有成功。

模板 PUG：

v-col.col-3(v-for='(user, i) in users' :key='i')
  v-card(max-width='374')
  v-img(:src='require("user.documents.selfie.url")'  height='100')

从 Firebase Firestore 加载用户对象。

export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    const ref = db.collection('users');
    ref.get().then((snapshot) => {
      snapshot.forEach((doc) => {
        const user = doc.data();
        user.id = doc.id;
        this.users.push(user);
      });
    });
  },
  }

错误： 

> This dependency was not found:

* user.documents.selfie.url in ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader", "cacheIdentifier":"1a565fa8-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/pug-plain-loader!./node_modules/vuetify-loader/lib/loader.js??ref--20-0!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Approval/BaseApproval.vue?vue&type=template&id=6cdee0a0&lang=pug&

To install it, you can run: npm install --save user.documents.selfie.url

我做错了什么？

先感谢您。

标签： firebasevue.jsvuetify.js

解决方案

我相信我找到了问题，但无法解决。

出于某种原因，当我将data()Firestore 中的对象存储到内存数组中时，会返回一个 Promise。然后，当我尝试像方法一样在外部获取时，对象返回“待定”

export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    db.collection('users').get().then((snapshot) => {
      snapshot.forEach((doc) => {
        const user = doc.data();
        user.id = doc.id;
        this.users = doc.data();
        console.log(this.users.status); // here the the log works.
      });
    });
  },
  methods: {
    imageUrl() {
      console.log(this.users.status); // Here the log return "Pending";
    },

推荐阅读