Implementation with Nuxt.js

[studiolathe]

Looking for usage advice for vue-lazyload with Nuxt.js. Have tried implementing component per below but images always return with a 404 error in console.

FYI – images load fine without v-lazy-container="{ selector: 'img' }

~/components/featured.vue

<template>
  <div class="featured">
    <div class="featured-wrapper" v-lazy-container="{ selector: 'img' }">\
        <div class="feature-item w-40">
          <figure class="feature-item-image">
            <img data-src="~/assets/images/image-1.jpg" alt="" />
            <figcaption></figcaption>
          </figure>
        </div>
        <div class="feature-item w-30 pull-10">
          <figure class="feature-item-image">
            <img data-src="~/assets/images/image-2.jpg" alt="" />
            <figcaption></figcaption>
          </figure>
        </div>
          <div class="feature-item featured-quote w-40 center">
           <h3 class="pb2">
             Our menu focuses on simple, hearty dishes designed to be shared<br />
           </h3>
           <button class="button-round" type="button" name="button">
             <nuxt-link to="/restaurant">View menu</nuxt-link>
           </button>
          </div>
          <div class="feature-item w-40 pv2">
            <figure class="feature-item-image">
               <img data-src="~/assets/images/image-3.jpg" alt="" />
               <figcaption></figcaption>
            </figure>
          </div>
    </div>
  </div>
</template>

 <script>
  import Vue from 'vue'
  import VueLazyload from 'vue-lazyload'

  Vue.use(VueLazyload)

</script>

Have also tried importing as a plugin in nuxt.config.js but no luck.

 plugins: [
    '~/plugins/lazyload.js'
  ],

New to Nuxt.js/Vue so any help will be greatly appreciated.

[ekntrtmz]

See here.

[Hideer]

markdown 生成的内容图片如何添加懒加载，有什么好的方法么

[tr1s]

See here.

Thanks, this thread helped me implement vue-lazyload properly with the requires.