Image stays blurred with lqip-loader

[jordanpunzalann]

Hi there,

I just have an issue with using lqip-loader with this package. I have:

1. enabled the next-optimised-images plugin in next.config.js file
2. npm install lqip-loader
3. added "?lqip" to my img src (i.e. <img src={require('../../images/hero.png?lqip')}/>

When I check to see the result the image is blurred, but it seems to remain that way. I have tried Chrome and FF, but they both give the same still blurred image. I have tried w/ other packages such as 'webp' and they work with next-optimised-images perfectly.

Any help would be greatly appreciated as I have been fiddling around with it for a few hours with no luck.

Thanks.

Blurred still image that does not optimise:

[akafaneh]

+1
I'm facing the same issue, it feels like there is a step we missed maybe, a way to replace the image once the big one loaded, but the docs are not clear on that and i've searched a lot and got nothing.

[kochie]

Yes so when you use the lqip loader it will return a string that is just the base64 lqip image. You need to add the image later.

Example from a react component I made.

async function getImage(): Promise<void> {
    return new Promise((resolve, reject) => {
      try {
        if (imgRef.current) {
          imgRef.current.onload = (): void => {
            imgRef.current?.classList.add(imageStyle.sharpen)
            resolve()
          }
          imgRef.current.src = src
          imgRef.current.onanimationend = (): void =>
            imgRef.current?.classList.remove(
              imageStyle.blur,
              imageStyle.sharpen
            )
        } else {
          console.warn('imgRef does not have a current reference!')
        }
      } catch (error) {
        console.error(error)
        reject(error)
      }
    })
  }

[goncalogteixeira]

Can you please give more context? I also have an issue with this. Can you give an example of the usage of the component you shared?