Nuxt.js: data-src doesn't load images from assets folder

Created on 20 Jan 2018 · 8Comments · Source: nuxt/nuxt.js

I am using great https://github.com/aFarkas/lazysizes package

It need such code

    <img data-src="~assets/images/kitten-large.png" class="lazyload lazy" />

But with data-src attribute Nuxt doesn't load images.
What should I do?

_{This question is available on Nuxt.js community (#c2305)}

Source

hackuun

Most helpful comment

You can add data-src to transformToRequire via build.extend in nuxt.config.js

module.exports = {
  build: {
    extend(config, { isDev }) {
      const vueLoader = config.module.rules.find((rule) => rule.loader === 'vue-loader')
      vueLoader.options.transformToRequire['img'] = ['src', 'data-src']
    }
  }
}

clarkdo on 24 Jan 2018

👍4

All 8 comments

Try to move your images to /static/images folder and use this path :

<img data-src="/images/kitten-large.png" class="lazyload lazy">

The assets directory should contain only your un-compiled assets such as LESS, SASS, or JS.

NicoPennec on 21 Jan 2018

@NicoPennec yes this is working from static or from another domain, but I am wondering why t doesnt work from aasets? I have images in assets and Nuxt/webpack using them succesfully. Why you said I shouldn't store images there? Otherwise I can't use base64 inlining, for example.

hackuun on 21 Jan 2018

Other words, I guess I need to store only small images in assets that I want to proceed with webpack? Right?

hackuun on 21 Jan 2018

Also, I have other plugins that use custom attributes to load images - and they working fine with images from assets. How to make this particular package to work? I mean, it's best in class solution, it whould be nice to make it work properly with Nuxt.

hackuun on 21 Jan 2018

You can add data-src to transformToRequire via build.extend in nuxt.config.js

module.exports = {
  build: {
    extend(config, { isDev }) {
      const vueLoader = config.module.rules.find((rule) => rule.loader === 'vue-loader')
      vueLoader.options.transformToRequire['img'] = ['src', 'data-src']
    }
  }
}

clarkdo on 24 Jan 2018

👍4

Any feedback on this?