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

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

我已经能够将一个图像存储起来，同时向数据库添加一个文档，包括图像的下载URL

为了从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>

所有员工都会出现，包括他们的姓名，但没有图片

我了解到一个可能的网页问题，可以通过使用require（“”）包装v-bind:src值来解决。我已经试过了，但是没有成功，我得到了一个终端错误，没有找到依赖项

我解决这个问题已经有几个小时了，不能使它工作

有人能帮我看看吗。我将非常感激

我选中了，它应该是

img src

而不是

src

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

我选中了，它应该是

img src

而不是

src

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

有时您会被卡住，看不到最细微的故障。谢谢你看。在此之后，出现了一个损坏的图像。事实证明，我必须指定一个存储规则，以允许匿名用户从数据库中读取数据。成功了。谢谢你。有时候你太困了，连一点小毛病都看不见。谢谢你看。在此之后，出现了一个损坏的图像。事实证明，我必须指定一个存储规则，以允许匿名用户从数据库中读取数据。成功了。非常感谢。