Describe the bug

When importing unlazy using import { lazyLoad } from 'unlazy', the Thumbhash and Blurhash algorithms for decoding the hash to a valid data uri are always included.

This may not always be necessary, since we can also create a valid data uri on the serverside.

Describe the feature

Thanks for this great plugin!

I think it would be a great addition to be able to use the Nuxt UnLazyImage component together with a picture tag and multiple sources.

I tried it with the following code snippet, but Chrome devtools shows that both the PNG as well as the webp version is loaded:

<picture>
	<source
		type="image/webp"
		:data-srcset="imageSrcSetWebP"
		data-sizes="auto"
	/>
	<UnLazyImage
		:blurhash="blurhash"
		:data-srcset="imageSrcSetPNG"
		width="640"
  		height="320"
		auto-sizes
	/>
</picture>

Describe the feature

Will it be possible to add transitions in a future update?

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

Describe the feature

Add transition like

:transition="200"

200ms transition

example https://docs.expo.dev/versions/latest/sdk/image/#transition

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

Reproduction

Repo: https://github.com/ArthurSegato/portfolio-frontend
Node v20.5.0
PNPM 8.7.4
Nuxt 3.7.2
Nitro 2.6.3
Unlazy 0.10.1

Describe the bug

I have a dynamic project page on my frontend that is accessible via the index page, the project page consumes images from my backend (served statically) and project data (consumed via a REST request), when accessing the project page via the home page, no error occurs, but when refreshing the page the following error appears

500
document is not defined
at Module.lazyLoad (/C:/Users/segato/Documents/Github/portfolio-frontend/node_modules/.pnpm/@unlazy+core@0.10.1/node_modules/@unlazy/core/dist/index.mjs:14:23)
at setup (C:\Users\segato\Documents\Github\portfolio-frontend\pages\projects\[id].js:19:27)
at _sfc_main.setup (C:\Users\segato\Documents\Github\portfolio-frontend\pages\projects\[id].js:248:23)
at callWithErrorHandling (C:\Users\segato\Documents\Github\portfolio-frontend\node_modules\.pnpm\@vue+runtime-core@3.3.4\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:156:18)
at setupStatefulComponent (C:\Users\segato\Documents\Github\portfolio-frontend\node_modules\.pnpm\@vue+runtime-core@3.3.4\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7190:25)
at setupComponent (C:\Users\segato\Documents\Github\portfolio-frontend\node_modules\.pnpm\@vue+runtime-core@3.3.4\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7151:36)
at renderComponentVNode (C:\Users\segato\Documents\Github\portfolio-frontend\node_modules\.pnpm\@vue+server-renderer@3.3.4_vue@3.3.4\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:614:15)
at renderVNode (C:\Users\segato\Documents\Github\portfolio-frontend\node_modules\.pnpm\@vue+server-renderer@3.3.4_vue@3.3.4\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:743:14)
at renderComponentSubTree (C:\Users\segato\Documents\Github\portfolio-frontend\node_modules\.pnpm\@vue+server-renderer@3.3.4_vue@3.3.4\node_modules\@vue\server-renderer

Describe the feature

First of all, thanks for the great tool!

I want to migrate a website I built with loadeer to unlazy, mainly because of the inbuilt support for thumb-hash. Unfortunately Chrome's native lazy loading is way too eager for my usecase. I Have a website with a lot! of accordions stacked on top of each other, each accordion content is display: none. But nevertheless Chrome loads the images inside the closed accordions, and worse, because the closed accordions don't take up much vertical space Chrome loads nearly all of the hundreds of images on the initial page load.

I guess I have quite a niche setup, but it might be also helpful in other unusual/complicated setups to have the option of using an intersection observer based solution for the lazy loading part. What do you think?

I guess I could also built my own intersection observer and manually load the images with loadImage.

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

Describe the feature

npm ERR! Found: [email protected]
npm ERR! peer svelte@"^3.54.0" from @unlazy/[email protected]

Reproduction

I don't know what's causing this issue, but I can help you investigate. just message me.

Describe the bug

This is the error in v0.10.0.

I get a similiar error in v0.9.0, just for a different type of code.

Additional context

No response

Logs

No response

Describe the feature

There is a method in the docs to manually load an image before it enters the viewport. This is not yet possible when using the Nuxt integration, or am I missing something?

A practical use case could be a horizontal slideshow, where you could preload the previous and the next slide image manually, so that they are already loaded when the user switches slides.

I tested it with a new prop named immediateLoad (see jjjuulliiaann@5784246) that triggers the loading when set to true. Do you think that could be a useful addition? I noticed you already had a similar implementation a while ago but removed it in 4e03c62.

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

Describe the feature

How can you tell if there was an error while downloading?

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

Hi! I believe it would be nice to add an asynchronous method that reads data using FileReader and does it faster.
Here is an example

Reproduction

https://stackblitz.com/edit/nuxt-3-xqdc5j?file=app.vue

Describe the bug

Hey,

I maybe found another bug, but I am not sure why it is happening. Is hapens with src and srcset attribute. Also tested it on localhost and on a nuxt build. The image is loaded twice. Also the image is only shown, when the image is loaded the second time.

You can test this, when you go into the network panel and selected the img filter.

Thanks for your help in advance again.

Best regards
Chris

Additional context

No response

Logs

No response

Describe the feature

Great library! Thumbhash was released a couple of days, which also supports the alpha channel in the image, could there be an option to enable this?

Resources
Thumbhash
JS implementation

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

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

Reproduction

<UnLazyImage
  :src-set="sourceSet"
  :placeholder-src="placeholderSrc"
  :auto-sizes="true"
  :width="image.width"
  :height="image.height"
  :alt="image.alt"
  :title="image.title"
  :preload="true"
  class="u-object-cover"
/>

Reproduction

• Running the nuxt playground within this package.
• Opening the developer console.
• You will see a few Hydration attribute mismatch warnings.
• The Hydration mismatch only applies to images where the placeholder is SSR rendered.

Describe the bug

The package is expected to not throw hydration attribute mismatch warnings on every single SSR placeholder rendered image that is being loaded.

I tried multiple things like applying a key attribute. However, I was unable to prevent these warnings.

I understand they are just warnings, but they are immensely annoying in developing because they clog the console output significantly.

My best guess would be that the nuxt component may need a way to wait for hydration before the placeholders are replaced with the actual image?

Additional context

Screenshot showing the warnings after installing and running this repository itself and starting the Nuxt playground.

Logs

No response

Discussed in #34

[unlazy] Missing `data-src` or `data-srcset` attribute

Describe the feature

Hey,

I love your plugin. It is super helpful. I now have the case where I would like to add media attributes to a picture element with your plugin, but unfortunately it is not possible right now, correct? When I add media property to the sources array, it doesn't show up in the code.

So I would like to get something like this:

  <picture>
    <source
      media="(orientation: landscape)"
      srcset="image-320w.jpg 320w, image-640w.jpg 640w"
    />
    <source
      media="(orientation: portrait)"
      srcset="image-320w.jpg 320w, image-640w.jpg 640w"
    />
    <img src="/images/foo.jpg" />
  </picture>

const exampleSources = [
  {
    media: "(orientation: landscape)",
    srcSet: "image-320w.jpg 320w, image-640w.jpg 640w",
  },
  {
    media: "(orientation: portrait)",
    srcSet: "image-320w.jpg 320w, image-640w.jpg 640w",
  },
];

Describe the feature

Are there any plans to handle videos or is this library for images only (or do I miss something)?

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

Describe the feature

as fixed-size-varying-density said, this feature provides,

• base on the biggest DPI image, e.g. 3x/image.png
• auto generate lower DPI image, e.g. 2x/image.png, 1x/image.png
• auto caculate the fixed width/height of image in 1x/image.png. e.g. width1x
• finally something like <img src="~assets/1x/image.png" srcset="~assets/2x/image.png 2x, ~assets/3x/image.png 3x" :width="width1x"

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

Reproduction

I cant share the link to the customer, but it happens on two webpages in the menu.

Describe the bug

Chrome preloads menu images on a customer webpage of mine, even if they are hidden initially.
Hidden images have no width and height and the auto-sizes calculation skips and sets no sizes attribute.
The srcset injection still occurs and replaces the data-srcset with srcset.
Without a sizes attribute set, the image will fallback to the default 100vw value and will load the largest image possible (with a large screen).

The images are loaded after the CSS is loaded, so the image should already hidden by then.
Only Chrome has this issue, Firefox behaves correctly.

Order of events

1. HTML is loaded
2. CSS is loaded main-[hash].css
3. Hidden images are loaded by Chrome (not Firefox)
4. Images have no size => sizes attribution fails => no sizes attribute set
5. Srcset is still injected
6. Without sizes attribute, browser fallbacks to 100vw.
7. Loads large mega-navi.jpg (example - happens with other images in the menu too)

Additional context

No response

Logs

No response

Reproduction

https://stackblitz.com/edit/nuxt-3-xqdc5j?file=app.vue

Describe the bug

Hey,

I think I found a bug for the loaded event. When using the preload prop the loaded event is not fired.

You can see this in the reproduction link. When you remove the preload attribute, it is working as expected and will remove the opacity-0 css class and also set the isLoaded ref to true.

If you have more questions, don't hesitate to ask me. :)

Thanks for your help.

Best regards
Chris

Additional context

No response

Logs

No response

Discussed in #34

[unlazy] Missing `data-src` or `data-srcset` attribute

Describe the feature

When resizing the browser window, some image sizes may change.

Currently the sizes attribute of the image is not updated, when a resize occurs.

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

Reproduction

Reproduction link: link

Insert any image from the ones provided, for example Ivan Grozny, and click on the "Update Image" button.
The image is expected to change.
In fact, what happens is that the image remains the same

Describe the bug

After reactively changing the image URL, the UnLazyImage component does not render the new value inside the src prop.

Additional context

Logs

No response

Reproduction

import { lazyLoad } from 'unlazy'

// Apply lazy loading for all images by the selector img[loading="lazy"]
lazyLoad()

Describe the bug

i have follow all the step but nothing happen in img tag

Additional context

No response

Logs

No response

Reproduction

Use the picture tag example from the docs: https://unlazy.byjohann.dev/guide/usage.html#usage

Describe the bug

data-sizes="auto" is not resolved on the source tag, but only on the img tag. No sizes tag is set on <source> tags.

Additional context

No response

Logs

No response

Describe the feature

Most of my current projects use <picture> tags with different sizes and image codecs (WebP / JPG / PNG etc.) and I would love to be able to use unlazy for them, but it seems like currently only the <img> tag is supported.

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

Reproduction

https://github.com/tobimori/kirby-baukasten/blob/main/site/snippets/picture.php

Describe the bug

When using unlazy with the <picture> tag, multiple source elements that each have data-srcset and an img element with the necessary data-src attribute, the image specified in data-src is downloaded before data-srcset which results in a duplicated download of those images.

Some sites where I noticed this:

• https://sew-morlaix.com/
• https://www.antonsten.com/about

Additional context

No response

Logs

No response

Reproduction

.

Describe the bug

If you forget to add data-src or data-srcset, the lazy loading for the given image is skipped without a error message. This can be hard to debug for new users.

Additional context

No response

Logs

No response