我有一个VueJS项目连接到Firebase数据库和Firebase存储。
我已经能够将图像存储起来,同时将包含图像的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('')包装在一起来解决。我已经尝试过了,但是它不起作用,我收到了一个终端错误,即找不到依赖项。
我已经在这个问题上呆了几个小时,无法正常工作。
请提供一个人看看。我将非常感谢。
答案 0 :(得分:2)
我检查了bootstrap-vue document,它应该是img-src
而不是src
<b-card
v-bind:title="employee.name"
:img-src="employee.imageUrl"
style="min-width: 15rem; max-width: 15rem;"
class=""
>
</b-card>