时间戳

首页 > 解决方案 > 如何使用 v-bind 显示来自 Firebase 存储的图像？

firebase - 如何使用 v-bind 显示来自 Firebase 存储的图像？

问题描述

我有一个连接到 Firebase 数据库和 Firebase 存储的 VueJS 项目。

我已经能够将图像存储起来，同时将一个文档添加到数据库中，包括图像的 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 问题，可以通过用 require('') 包装 v-bind:src 值来解决。我已经尝试过了，但它不起作用，我收到一个终端错误，提示找不到依赖项。

我已经解决这个问题几个小时了，无法让它工作。

有人可以提供看看。我将不胜感激。

标签： firebasefirebase-realtime-databasevuejs2firebase-storagewebpack-dev-server

解决方案

我检查了bootstrap-vue 文档，它应该img-src是src

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

推荐阅读