CODEWITHSUNDEEP
firebasefirebase-realtime-databasevuejs2firebase-storagewebpack-dev-server
timmy
timmy

Reputation: 488

How to display images from firebase storage with v-bind?

I have a VueJS project connected to a Firebase database and Firebase Storage.

I have been able to put an image to storage and at the same time add a document to the database including the downloadURL of the image.

To retrieve data from firebase I make this call

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)
    })
  })

The result of this call I log to the console. It shows:

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

To present the retrieved data I use this template code

       <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>

All of the employees are presented including their names but without the image.

I read about a possible Webpack issue which can be solved by wrapping the v-bind:src value with require(''). I have tried that but it doesn't work, I get a terminal error that the dependency was not found.

I have been at this problem for a few hours and can not get it to work.

Can someone please provide have a look. I will be very grateful.

Upvotes: 0

Views: 789

Answers (1)

ittus
ittus

Reputation: 22403

I checked bootstrap-vue document, it should be img-src instead of src

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

Upvotes: 2

Related Questions