CODEWITHSUNDEEP
vue.jsvuetify.jsnuxt.js
Ron Al
Ron Al

Reputation: 476

nuxtjs vuetify v-img placeholder not working

under nuxt.js i'm using vuetify. v-img works, but as i try to use the 'placeholder' feature, as described in the docs, it does not work. for the example i copy exactly the example that works in the docs. we suppose to see a circle loader while we wait for the image. for testing, i'm using chrome to slow down the connection. this doesn't work. there is a blank for a few seconds, then the image appears. here is the code. any idea?

<v-col cols="4">
  <v-img :src="selectedItem.picture">
    <template v-slot:placeholder>
       <v-row class="fill-height ma-0" align="center" justify="center">
         <v-progress-circular indeterminate color="blue"></v-progress-circular>
       </v-row>
    </template>
  </v-img>
</v-col>

note: i'm not using vuetify-loader. could this be the issue?

Upvotes: 0

Views: 2189

Answers (1)

Yogesh Vadekar
Yogesh Vadekar

Reputation: 129

Better use 'default' slot and show it while checking @error="imgLoadStatus='error'" of image. For me, sometimes in runtime while dynamically loading and changing image, placeholder was not showing up at all.

Upvotes: 1

Related Questions