У меня есть проект VueJS, подключенный к базе данных Firebase и хранилищу Firebase.
Я смог поместить изображение в хранилище и в то же время добавить документ в базу данных, включая 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>
Все сотрудники представлены с указанием их имен, но без изображения.
Я читал о возможной проблеме Webpack, которую можно решить, обернув значение v-bind:src с помощью require(''). Я пробовал это, но это не работает, я получаю сообщение об ошибке терминала, что зависимость не найдена.
Я занимаюсь этой проблемой уже несколько часов и не могу заставить ее работать.
Может кто-нибудь, пожалуйста, посмотрите. Я буду очень благодарен.
