[nuxt] Image not loaded when `src` attribute is set

Question

[nuxt] Image not loaded when `src` attribute is set

lxccc812 opened this issue a year ago · 10 comments

lxccc812 commented a year ago

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

Answer 1 · 2023-09-06T11:11:19.000Z

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.

Answer 2 · 2023-09-07T02:00:16.000Z

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.

Answer 3 · 2023-09-07T04:48:27.000Z

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.

Answer 4 · 2023-09-07T05:42:08.000Z

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.

Answer 5 · 2023-09-07T08:05:12.000Z

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

Answer 6 · 2023-09-07T11:30:38.000Z

You're right, it's a bug! Will fix it soon.

Answer 7 · 2023-09-07T13:46:47.000Z

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.

Answer 8 · 2023-09-07T14:01:44.000Z

@lxccc812 Thanks for the reproduction. I have already successfully reproduced the issue locally. 👍

Answer 9 · 2023-09-07T14:08:19.000Z

Thank you for your reply and look forward to solving the problem. 😉

Answer 10 · 2023-09-07T14:47:47.000Z

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