DEV Community

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

 
ignore_you profile image
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 :)

Thread Thread
 
theolavaux profile image
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="">
Thread Thread
 
theolavaux profile image
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.

Thread Thread
 
lmuzquiz profile image
lmuzquiz • Edited

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

i also used ~/ instead of just ~
code