[nuxt] Image not loaded when `src` attribute is set
lxccc812 opened this issue Β· comments
Reproduction
None
Describe the bug
After I install @ unlazy/nuxet and add it to nuxt.config.ts.
The image doesn't display properly. Did I miss any Settings
When I set the placeholder src attribute, the image can be displayed normally, but it doesn't seem like lazy loading mode anymore. How can I achieve simple lazy loading? Also, by the way, I only want to display the original image without any other processing required
Additional context
"nuxt": "^3.7.0"
"@unlazy/nuxt": "^0.9.3"
Logs
None
Hey there!
Quick question: If you don't need a placeholder image (either custom image or hash string), why bother using unlazy instead of just an <img> tag with loading="lazy" applied? I think you don't need this package for you use-case.
The <img> native loading="lazy" attribute does not work perfectly for all browsers, and Safari does not support this attribute, so we still need a plugin to implement this feature. So, did I miss a step that led to the picture not being displayed normally.
Unlazy itself uses the loading="lazy" attribute under the hood. There is a note on Safari support in the getting started section.
As far as I can tell, your usage is correct. But without a reproduction I can't investigate the issue.
So if you need another lightweight solution, say with an intersection observer, you can check out my Loadeer.js lazy loading library.
Thanks for your answer, I will create a minimal example in my spare time to demonstrate the problem I encountered.Please don't close this issue yet.
Thanks! π
By the way, the lazyLoading prop is true by default, you can omit it.
For Nuxt example usages, you can take a look into the playground: https://github.com/johannschopplich/unlazy/blob/main/packages/nuxt/playground/app.vue
You're right, it's a bug! Will fix it soon.
I have a minimal example to illustrate this, but there's a problem with this minimal example,It can only work properly when it is created for the first time, and it will not work properly after I share it and visit it again. If possible, please kindly copy a new project, the code is not much.
@lxccc812 Thanks for the reproduction. I have already successfully reproduced the issue locally. π
Thank you for your reply and look forward to solving the problem. π
@lxccc812 The problem was, that you neither provided a src, any hash, nor srcset as placeholder preview. But the loading="lazy" attribute works only, when at least src is present. I have implemented a tiny inlined placeholder GIF. Your code should work just fine with the next release.