nuxtjs vuetify v-img placeholder not working

Question

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?

Nothing. I was hoping to see the spinner going until the picture loads, but it doesn't. just empty space, and then the picture shows up. I am using dev tools to cause the access to server to be slower (network, 3G slow). No errors in console. — Ron Al
– Ron Al, Commented Mar 30, 2020 at 19:10
Your code is working after adding an aspect ratio props to the v-img. — Anees Hameed
– Anees Hameed, Commented Mar 30, 2020 at 19:43

Yogesh Vadekar · Accepted Answer · 2021-02-12 13:54:34Z

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.

Collectives™ on Stack Overflow

nuxtjs vuetify v-img placeholder not working

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related