title: How to check if image is loaded in Vue/Nuxt?
body: <p>New to Vue and Nuxt. I am trying to show skeletons before image is loaded completely.</p>
  <p>Here's my attempt, skeleton shows but image is never loaded and onImageLoad is never called.</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;img v-if=&quot;isLoaded&quot; @load=&quot;onImgLoad&quot; :src=&quot;me.img&quot;&gt;
      &lt;div v-else class=&quot;skeleton&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  export default {
    props: {
      me: Object,
    },
    data() {
      return {
        isLoaded: false,
      }
    },
    methods: {
      onImgLoad() {
        console.log(` &gt;&gt; isLoaded:`, this.isLoaded)
        return this.isLoaded = true
      },
    },
  }
  &lt;/script&gt;
  </code></pre>
  <p>I have some broken image url to test fallback src, is it a problem? But I tried removing those broken links and it's still not working.</p>
  <p>Example data:</p>
  <pre><code>export const me = {
    name: 'David',
    img: 'https//david.png', // Example broken &gt; https://no.jpg
  },
  </code></pre>
  <p>Please help me, what I am doing wrong?</p>