nuxtjs vuetify v-img 占位符不起作用答案

【问题标题】：nuxtjs vuetify v-img placeholder not workingnuxtjs vuetify v-img 占位符不起作用
【发布时间】：2020-07-09 14:28:03
【问题描述】：

在 nuxt.js 下，我正在使用 vuetify。 v-img 有效，但是当我尝试使用文档中描述的“占位符”功能时，它不起作用。对于示例，我完全复制了文档中的示例。我们假设在等待图像时会看到一个圆形加载器。为了测试，我正在使用 chrome 来减慢连接速度。这不起作用。空白几秒钟，然后图像出现。这是代码。有什么想法吗？

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

注意：我没有使用 vuetify-loader。这可能是问题吗？

【问题讨论】：

这里没有看到任何错误。你的控制台说什么？
没什么。我希望看到微调器一直运行到图片加载，但事实并非如此。只是空的空间，然后图片显示出来。我正在使用开发工具导致对服务器的访问变慢（网络，3G 慢）。控制台中没有错误。
在向 v-img 添加纵横比道具后，您的代码正在运行。
是的！谢谢，这解决了这个问题。

标签： vue.js vuetify.js nuxt.js

【解决方案1】：

最好使用“默认”插槽并在检查图像的@error="imgLoadStatus='error'" 时显示它。对我来说，有时在运行时动态加载和更改图像时，占位符根本没有出现。

【讨论】：