CODEWITHSUNDEEP
vuejs2vuexvuetify.js
Saugat Thapa
Saugat Thapa

Reputation: 382

vuetify doesnt load image in <v-img> although prop shows it has the url

<v-img :src="getPhoto()"  height="200px" width="200px"></v-img>

this is for photo to load from getphot function. the src has the url for facebook but vuetify doesnt load anything enter image description here

computed: {
  user () {
    return this.$store.getters.user
  }
},
methods: {
  getPhoto () {
    return this.$store.getters.user.photoUrl
  }
}

i do not get any error. and when i use the link i can access the image. because i have logged in from my device. note: i am using firebase for all of these

Upvotes: 1

Views: 9285

Answers (1)

DjSh
DjSh

Reputation: 2764

Try

<v-img :src="require('getPhoto()')"  height="200px" width="200px"></v-img>

instead of

<v-img :src="getPhoto()"  height="200px" width="200px"></v-img>

Vue loader converts relative paths into require functions automatically for you. Unfortunately, this is not the case when it comes to custom components. You can circumvent this issue by using require. If you're using Vuetify as a Vue-CLI 3 plugin, you can edit your project's vue.config.js file by modifying the options for vue-loader.

// Incorrect
<v-img src="../path/to/img" />

// Correct
<v-img :src="require('../path/to/img')" />

Source: Vuetify

Update: When not using a relative path, I tried creating an example when using a function to get the URL for the image source. I think there are two problems with your code:

  1. Remove the () from getPhoto() in <v-img>
  2. Add the getPhoto() to the computed property.

Here is a Codepen

I hope it helps.

Upvotes: 3

Related Questions