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

Question

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.

when you use :src='user.documents.selfie.url' what error do you have? — Hans Felix Ramos
– Hans Felix Ramos, Commented May 7, 2020 at 17:35
@HansFelixRamos If I use :src='user.documents.selfie.url' i got this in the browser console and the whole v-for section disappear. webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1887 TypeError: Cannot read property 'selfie' of undefined — Fabio Paitra
– Fabio Paitra, Commented May 7, 2020 at 19:23

Fabio Paitra · Accepted Answer · 2020-05-08 20:34:35Z

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";
    },

Daniel · Accepted Answer · 2020-05-07 17:43:29Z

0

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

answered May 7, 2020 at 17:43

Daniel

35.9k17 gold badges115 silver badges162 bronze badges

3 Comments

Fabio Paitra Over a year ago

unfortunately the :src='user.documents.selfie.url' doesn't work. Out of Vuetify, works fine.

Daniel Over a year ago

what do you mean by "Out of Vuetify, works fine"? Sounds maybe like a matter of it working only in dev server.

Fabio Paitra Over a year ago

out of <v-app> </v-app> tag. I had bulma css only before and it was working.

Radu Diță · Accepted Answer · 2020-05-07 19:07:40Z

0

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

answered May 7, 2020 at 19:07

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Related