Disable console errors when only placeholder is used

[chrisspiegl]

I am trying to just display a thumbhash in some instances.

But if I do this with UnlazyImage I always get the error on the console:

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

I agree that this makes sense, but is there a way to make it known that I really don't want any src to load? Or maybe a way to prevent the src from loading in any kind of automatic way and only do so when there is a parameter set to true?

I have achieved something like this with a workaround to manually create the src from the thumbhash with the provided functions. But thought this could be cleaner by providing something of a parameter?

Warm regards,
Chris

[johannschopplich]

Hi there! This is a use case I'm probably gonna encounter myself.

In my opinion, UnlazyImage should aim to achieve the primary goal of this library – lazy loading of a given image. A hash is only part of the lazy loading strategy.

Having said that, I like the idea of providing a separate component to only display a hash placeholder:

• e.g. UnLazyPlaceholder, which accepts a hash prop

What do you think? Do you prefer a prop in the current UnlazyImage component?

PR welcome! 🤗

[chrisspiegl]

Personally, I would prefer a prop to which would switch between or 'enable/disable' the placeholder vs src source.

This way it would keep flexibility by having default behavior: "replace placeholder instantly"

But gives a way to only load the src once the prop is "true"?

I have seen this in another library, which basically gives full flexibility about when to load / unload the images.

• load: true => replace whenever ready
• load: false => display placeholder until switched to true and when switch back to false => placeholder again.

At least that's an idea.

[johannschopplich]

There is already a lazyLoad: boolean option for the Nuxt integration which seems close to what you suggest with lazy. What about using that?

[chrisspiegl]

I did think that I read that somewhere about the "deferr loading until true". I did set the :lazy-load="false" but then it still complains about the data-src || data-src-set not being present.

[chrisspiegl]

Oh, Ok, I just tested it again with just a random src="#" and it stopped complaining about the missing data-src-set or data-src.

So, this workaround appears to achieve what I want at this time:

<UnLazyImage
        src="#"
        :thumbhash="_thumbhash"
        :lazy-load="false"
      />

[johannschopplich]

I will implement a __DISABLE_LOGGING__ build flag in the following days, which you can then use! This will simplify your setup (ssr is true by default):

<UnLazyImage
  :thumbhash="_thumbhash"
  :lazy-load="false"
/>

[johannschopplich]

A new build flag __UNLAZY_LOGGING__ has been added to unlazy:

// `vite.config.ts`
import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    // Defaults to `true`
    __UNLAZY_HASH_DECODING__: false,
    // Defaults to `true`
    __UNLAZY_LOGGING__: false,
  },
})