lqip error: Input file is missing or of an unsupported image format lqip v2.1.0

[sebqq]

Hello. I'm not able to make lqip work with dynamic requires.

const src = 'image.png'

...
<img
   alt={`${alt}-placeholder`}
   src={require(`../../assets/images/${src}?lqip`)}
   style={{ ...style, filter: 'blur(7px)' }}
 />

ends up with following error:

> Using external babel configuration
> Location: "/Users/../web/.babelrc"
Error: Input file is missing or of an unsupported image format lqip v2.1.0
Error: Input file is missing or of an unsupported image format lqip v2.1.0
Error: Input file is missing or of an unsupported image format lqip v2.1.0
Error: Input file is missing or of an unsupported image format lqip v2.1.0
Error: Input file is missing or of an unsupported image format lqip v2.1.0
Error: Input file is missing or of an unsupported image format lqip v2.1.0
Error: Input file is missing or of an unsupported image format lqip v2.1.0
Error: Input file is missing or of an unsupported image format lqip v2.1.0
Error: Input file is missing or of an unsupported image format lqip v2.1.0
Creating an optimized production build ./Users/../web/node_modules/lqip/index.js:76
  throw up;
  ^

ReferenceError: err is not defined
    at /Users/sebastian/../web/node_modules/lqip-loader/index.js:80:16
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

For webp-loader (or without ?lqip suffix), dynamic require works just fine.

Any suggestions please?

Thanks!

[Sowed]

Same here. Referencing the path directly works, but dynamic require fails. The following works,

<img
  src={require(`path-to-my-image/image.png?lqip`)}
  title={alt}
  alt={alt}
/>

And this this fails

const imgSrc = 'path-to-my-image/image.png';

...

<img
  src={require(`${imgSrc}?lqip`)}
  title={alt}
  alt={alt}
/>

I get the same logs too.

And just like you, ?webp and ?trace works fine all ways but not ?lqip. I think it's to do with lqip v2.1.0 🤔,   still digging around.

[Sowed]

@sebqq, I think there is a typo at that referenced line 80:16.

at /Users/sebastian/../web/node_modules/lqip-loader/index.js:80:16

The path resolved from the temperate literal might be incorrect, pointing to a missing file. When importing with require, the loader breaks whilst catching the error, and breaks the build too so it's hard to trace the failure in your file.

I forked the repo and ran the build against it, the build caught the error in my path (was using absolute instead of relative paths for the require), fixed it and it's all good. Until @zouhir, fixes it of course. 🙂

[Cogniveon]

I have encountered the same problem. Will it get fixed soon?

[MejanH]

Same with me too, did anyone tried with custom webpack configuration?

[MejanH]

Finally found the problem. In my markdown, my cover image name was '/images/test.jp' which lqip-loader didn't support. When I changed the cover string to only 'test-jp' and updated the index page image location it worked. you can only return filename with variable not location.