initial image is showing up as "not found" with nuxt

Hi

When implementing vue-lazyload in nuxt, I see the following result in my browser (please also refer to the picture below):

1. image is “not found” as the alt text is shown
2. the loading placeholder image is shown
3. the actual image is shown

Why is it that I see this first step, i.e. the image that is not being found? This is very weird behaviour and I do not manage to solve this problem.

This is my config:

lazyload.client.js plugin:

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

import loading from '../assets/images/placeholder.png'

Vue.use(VueLazyload, {
  loading
})

And I have this in my template:

<template functional>
  <figure class="image is-3by2">
    <img v-lazy="props.src" :alt="props.alt" />
  </figure>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true
    },
    alt: {
      type: String,
      required: true
    }
  }
}
</script>

nuxt.config.js file excerpt:

export default {
  mode: 'universal',
  plugins: [
    '~/plugins/lazyload.client.js'
  ],
  ...
}
````

[miteyema]

@jrah No, sorry, I still have that problem…

[Martin7mind]

img:not([src]) { display: none; }

this seems to work in chrome, to hide the broken images until the javascript set the src-attribute