lqip error: Input file is missing or of an unsupported image format lqip v2.1.0
See original GitHub issueHello. 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!
Issue Analytics
- State:
- Created 3 years ago
- Reactions:3
- Comments:5
Top Results From Across the Web
I deployed my project, I am getting this error Input file contains ...
I deployed my project, I am getting this error Input file contains unsupported image format · Ask Question. Asked 1 year, 2 months...
Read more >Error "gatsby-plugin-manifest" Input file contains unsupported ...
I'm getting an unsupported image error when trying to deploy my Gatsby site to Netlify. The error is from the gatsby-plugin-manifest, see screenshot...
Read more >Testing Sharp With Memfs Error: [Error: Input File Is Missing]
web/.babelrc Error: Input file is missing or of an unsupported image format lqip v2.1.0 Error:. Manipulate images using the #Node.js library ...
Read more >Optimize Images | Cloudinary
What is image optimization? Optimizing an image involves delivering images in the format, dimensions, resolution, and quality that will yield ...
Read more >Input file contains unsupported image format might be a race ...
Nodejs sharp error - Input file contains unsupported image format might be a race condition. Was doing some S3 work where I had...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@sebqq, I think there is a typo at that referenced line 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. 🙂
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.