Question

我正在尝试从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

我怎么可能做错了？

谢谢。

Answer 1

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

由于某种原因，当我将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";
    },

Answer 2

我对pug不太熟悉，但是在我看来字符串解释不正确

我认为您不需要为require使用第二组引号。你可以尝试：

v-img(:src='require(user.documents.selfie.url)'

但是需求是模块请求，如果user.documents.selfie.url包含完整（绝对）路径，那么:src='user.documents.selfie.url'应该可以工作

Answer 3

在编译时可以解析地址的情况下，您需要使用require。

对于运行时路径，您不应使用require，而只需使用变量名

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

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

3 个答案: