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

[miteyema]

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'
  ],
  ...
}
````

[jrah]

Hi @miteyema ,

Did you manage to find a solution for this? I have run into exactly the same problem.

[miteyema]

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

[mstaack]

have you tried enabling client side rendering for that part with <client-only> ?

[jrah]

@mstaack Visually that works, but won't that have issues with SEO and the alt tag?

[filipwronski]

I had the same issue - because of browser adblock plugin ;)

[blek-id]

Having same issue, I opened it on incognito with no browser adblock but the issue still persist @filipwronski

have you tried enabling client side rendering for that part with ? This works, but yes, it's going to affect SEO I think?

Anyone has a solution for it now?

[MatteoGauthier]

Up ?

[AmrKafina]

I'm getting the same issue, but only when first loading a page. It no longer occurs once you navigate to different pages in-app.

[prateekbaheti]

One work around that worked for me is set the src attribute on the img tag to the placeholder image (the one used for loading). <img v-lazy="{loading: 'loading.gif', src: 'src.png'}" :src="loading.gif" :alt="props.alt" />

[miteyema]

@prateekbaheti That's a working solution, but I would personally not use that. If for whichever reason the plugin/javascript does not work, the user is stuck with the loading picture. I also don't know how this affects SEO...

[Martin7mind]

no other solutions for this?

[Martin7mind]

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

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

[minhtaicdv1995]

you set src="image-lazyload.jpg"

[arnfox]

I think, showing the "loading.jpg" place holder is not an option since you still getting images without proper src from server which will impact SEO (crawlers which work without good JS support will only see the content from your server which don't have proper src's)