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?
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.
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 :)
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.
A web developer who combines branding, user interface design , web development & digital marketing, to improve sales. Proud that all of his clients came from mouth to mouth recommendation.
It seems that you didn't insert lazysizes as a plugin - it's an important part.
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/lazysizes.client.js
I assume that lazysizes is loaded correctly because my final html tag looks like that, I have a
lazyloaded
class.Original tag is
Well, the only difference I can notice is that you start path in
img
from~/assets
, not~assets
. Also attrloading=lazy
looks like an overkill, I'd rather lean or on lazysizes, or on native browser's API. Or am I missing smth?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 thetransformAssetUrls
configuration. It seems to be partially taken into account because thesrc
tag is appended to my image, even though I only specified adata-src
attribute... I'm using astatic
target for my Nuxt project but that shouldn't interfere with configuration here.Okay, can you try to put path to
src
directly, not todata-src
? Just to check that with assets everything is fine by default. Maybe issue is out of scope of this tutorial :)I removed the
loading
attribute as you suggested and changeddata-src
tosrc
and my image is loading fine, the path is different as you can see.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 thetransformAssetUrls
onvue-loader
. Problem is, it wouldn't work for SSR, maybe it will help someone that comes here in the future.Thanks, i use yarn generate and it worked without the if (isClient)
i also used ~/ instead of just ~