Discussion on: Minify, generate WebP and lazyload images in your Vue & Nuxt application

[Théo LAVAUX]

Forgot to specify that part, you're right, but it is configured as you suggested. I have "lazysizes": "^5.2.2" in my package.json.

nuxt.config.js

  /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    '~/plugins/lazysizes.client.ts',
  ],

plugins/lazysizes.client.js

import lazySizes from 'lazysizes'
export default lazySizes

I assume that lazysizes is loaded correctly because my final html tag looks like that, I have a lazyloaded class.

<img data-src="~/assets/img.png" alt="Image description" loading="lazy" class=" lazyloaded" data-v-13f1b7fa="" src="~/assets/img.png">

Original tag is

<img
  class="lazyload"
  data-src="~/assets/img.png"
  alt="Image description"
  loading="lazy"
/>

[Alex]

Well, the only difference I can notice is that you start path in img from ~/assets, not ~assets. Also attr loading=lazy looks like an overkill, I'd rather lean or on lazysizes, or on native browser's API. Or am I missing smth?

[Théo LAVAUX]

I thought that lazysizes acted as a plugin for browsers that don't support the loading attribute. The extra slash might be due to different Nuxt versions but it's standard for now : nuxtjs.org/guide/assets/. I'm wondering why my image URL isn't interpreted by vue-loader/webpack even though I specified the transformAssetUrls configuration. It seems to be partially taken into account because the src tag is appended to my image, even though I only specified a data-src attribute... I'm using a static target for my Nuxt project but that shouldn't interfere with configuration here.

[Alex]

Okay, can you try to put path to src directly, not to data-src? Just to check that with assets everything is fine by default. Maybe issue is out of scope of this tutorial :)

[Théo LAVAUX]

I removed the loading attribute as you suggested and changed data-src to src and my image is loading fine, the path is different as you can see.

<img src="/_nuxt/assets/img.png" alt="Image description" class=" ls-is-cached lazyloaded" data-v-13f1b7fa="">

[Théo LAVAUX]

I finally found the solution thanks to this article ! medium.com/@dannjb/a-lazy-loading-.... I was doing a check on the isClient property before setting the transformAssetUrls on vue-loader. Problem is, it wouldn't work for SSR, maybe it will help someone that comes here in the future.

As I run SSR using yarn generate, I need the asset url transform to happen on the server too; the isClient check is removed.

[lmuzquiz]

Thanks, i use yarn generate and it worked without the if (isClient)

i also used ~/ instead of just ~