CODEWITHSUNDEEP
firebasevue.jsvuetify.js
Fabio Paitra
Fabio Paitra

Reputation: 63

How to add dynamically images with a v-for in vuetify and firebase

I'm trying to dynamically load the images with a from firebase store (I get the URL from firestore and store in an array ).

But neither the :src='require("user.documents.selfie.url")' nor :src='user.documents.selfie.url' works. I've tried tons of stackoverflow answers, but no success.

Template PUG:

v-col.col-3(v-for='(user, i) in users' :key='i')
  v-card(max-width='374')
  v-img(:src='require("user.documents.selfie.url")'  height='100')

Load user object from Firebase Firestore.

export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    const ref = db.collection('users');
    ref.get().then((snapshot) => {
      snapshot.forEach((doc) => {
        const user = doc.data();
        user.id = doc.id;
        this.users.push(user);
      });
    });
  },
  }

ERROR: 

> This dependency was not found:

* user.documents.selfie.url in ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader", "cacheIdentifier":"1a565fa8-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/pug-plain-loader!./node_modules/vuetify-loader/lib/loader.js??ref--20-0!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Approval/BaseApproval.vue?vue&type=template&id=6cdee0a0&lang=pug&

To install it, you can run: npm install --save user.documents.selfie.url

What could i've been doing wrong?

Thank you in advance.

Upvotes: 0

Views: 284

Answers (3)

Fabio Paitra
Fabio Paitra

Reputation: 63

I believe I find the issue but can't resolve.

For some reason, when I store the data() object from Firestore into an memory array, returns a promise. Then when I try to fetch outside like the methods the object returns "pending" 

export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    db.collection('users').get().then((snapshot) => {
      snapshot.forEach((doc) => {
        const user = doc.data();
        user.id = doc.id;
        this.users = doc.data();
        console.log(this.users.status); // here the the log works.
      });
    });
  },
  methods: {
    imageUrl() {
      console.log(this.users.status); // Here the log return "Pending";
    },

Upvotes: 1

Radu Diță
Radu Diță

Reputation: 14201

You need to use require when the address can be resolved at compile time.

For runtime paths you shouldn't use require, you can just use the variable name

v-col.col-3(v-for='(user, i) in users' :key='i')
  v-card(max-width='374')
  v-img(:src='user.documents.selfie.url'  height='100')

Upvotes: 0

Daniel
Daniel

Reputation: 35724

I'm not very familiar with pug, but it seems to me that the string is not interpreted correctly

I don't think you need a second set of quotes for require. Can you try:

v-img(:src='require(user.documents.selfie.url)'

But the require is for module request, if the user.documents.selfie.url includes the full (absolute) path, then :src='user.documents.selfie.url' should work

Upvotes: 0

Related Questions