data-src doesn't load images from assets folder

[hackuun]

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)}

[NicoPennec]

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.

[hackuun]

@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]

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

[hackuun]

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.

[clarkdo]

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']
    }
  }
}

[shindeefranco]

Any feedback on this?

[clarkdo]

@shindeefranco
Hope this can help you #2008 (comment)

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.