Как динамически добавлять изображения с помощью v-for в vuetify и firebase - PullRequest
Новая
       6

Как динамически добавлять изображения с помощью v-for в vuetify и firebase

0 голосов
/ 07 мая 2020

Я пытаюсь динамически загружать изображения из хранилища firebase (я получаю 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

Что я мог делал что-то не так?

Заранее благодарю

Ответы [ 3 ]

1 голос
/ 08 мая 2020

Я считаю, что нашел проблему, но не могу ее решить.

По какой-то причине, когда я сохраняю объект data() из Firestore в массиве памяти, возвращает обещание. Затем, когда я пытаюсь получить извне, как методы, объект возвращает «ожидающий» 

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";
    },
0 голосов
/ 07 мая 2020

Вам нужно использовать 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')
0 голосов
/ 07 мая 2020

Я не очень знаком с pug, но мне кажется, что строка интерпретируется неправильно

Я не думаю, что вам нужен второй набор кавычек для require. Можете ли вы попробовать:

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

Но требуется для запроса модуля, если user.documents.selfie.url включает полный (абсолютный) путь, тогда :src='user.documents.selfie.url' должно работать

...