如何检查 Vue/Nuxt 中是否加载了图像？

Question

Vue 和 Nuxt 的新手。我试图在图像完全加载之前显示骨架。

这是我的尝试，骨架显示，但图像从未加载，并且 onImageLoad 从未被调用。

<template>
  <div>
    <img v-if="isLoaded" @load="onImgLoad" :src="me.img">
    <div v-else class="skeleton"></div>
  </div>
</template>

<script lang="ts">
export default {
  props: {
    me: Object,
  },
  data() {
    return {
      isLoaded: false,
    }
  },
  methods: {
    onImgLoad() {
      console.log(` >> isLoaded:`, this.isLoaded)
      return this.isLoaded = true
    },
  },
}
</script>

我有一些损坏的图像 url 来测试后备 src，这是一个问题吗？但我尝试删除那些损坏的链接，但它仍然无法正常工作。

示例数据：

export const me = {
  name: 'David',
  img: 'https//david.png', // Example broken > https://no.jpg
},

我做错了什么？

Answer 1

因为isLoaded在初始渲染时为 false，img元素将从 DOM 树中删除。如果\xe2\x80\x99不在DOM中，则不会请求\xe2\x80\x99图像src，因此\xe2\x80\x94没有加载事件。

\n

切换到v-show。该img元素将保留在 DOM 中，因此该@load事件将触发。

\n