Как отображать изображения из хранилища Firebase с помощью v-bind? - PullRequest
Новая
       20

Как отображать изображения из хранилища Firebase с помощью v-bind?

0 голосов
/ 25 февраля 2019

У меня есть проект VueJS, подключенный к базе данных Firebase и Firebase Storage.

Мне удалось поместить изображение в хранилище и одновременно добавить документ в базу данных, включая downloadURL изображения.

Для извлечения данных из firebase я делаю этот вызов 

db.collection("employees")
  .get()
  .then(querySnapshot => {
    querySnapshot.forEach(doc => {
      console.log(doc.data())
      const data = {
        id: doc.id,
        employee_id: doc.data().employee_id,
        name: doc.data().name,
        imageUrl: doc.data().imageUrl
      };
      this.employees.push(data)
    })
  })

Результат этого вызова я записываю на консоль.На нем показано: 

{imageName: "efefe", imageUrl: "https://firebasestorage.googleapis.com/v0/b/test-a…=media&token=9d2d7a1f-39b3-4582-8df1-f857aefc1a70", name: "jack"}

Для представления полученных данных я использую этот шаблон кода 

       <div v-for="employee in employees" :key="employee.id" class="slide">
          <b-card
            v-bind:title="employee.name"
            v-bind:src="employee.imageUrl"
            style="min-width: 15rem; max-width: 15rem;"
            class=""
          >
          </b-card>
        </div>

Представлены все сотрудники, включая их имена, но без изображения.

Я читал о возможной проблеме Webpack, которая может быть решена путем переноса значения v-bind: src в require ('').Я пробовал это, но это не работает, я получаю терминальную ошибку, что зависимость не найдена.

Я был в этой проблеме в течение нескольких часов и не могу заставить ее работать.

Может кто-нибудь предоставить, пожалуйста, посмотрите.Буду очень благодарна.

1 Ответ

0 голосов
/ 25 февраля 2019

Я проверил документ начальной загрузки , он должен быть img-src вместо src

<b-card
     v-bind:title="employee.name"
     :img-src="employee.imageUrl"
     style="min-width: 15rem; max-width: 15rem;"
     class=""
   >
</b-card>
...