Next.js Image Component Not Properly Handling Fallback for Low-Quality Image Placeholder (LQIP)
I'm stuck on something that should probably be simple... I've tried everything I can think of but I tried several approaches but none seem to work... I'm working on a personal project and I'm currently using the Next.js Image component to handle image optimization in my application... I've set up a low-quality image placeholder (LQIP) for better performance while the larger image loads, but I'm working with an scenario where the placeholder doesn't display as expected. Instead, I see a blank space for a brief moment before the main image loads. Here’s how I’ve implemented it: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <Image src="/path/to/high-quality-image.jpg" alt="A beautiful scenery" width={800} height={600} placeholder="blur" blurDataURL="/path/to/low-quality-image.jpg" /> ); }; ``` I’ve checked the paths for both the high-quality and low-quality images, and they seem correct. I also verified that the low-quality image exists and is accessible. However, I am using Next.js version 12.2.0 and have noticed that the placeholder only shows up as a blank area instead of the blurred version. Additionally, I've looked into the browser console and found the following warning: ``` Warning: The `placeholder` prop is being ignored as you did not provide a `blurDataURL`. ``` This warning seems confusing, as I’m indeed providing a `blurDataURL`. I’ve tried upgrading to the latest version of Next.js but the scenario continues. Any insights on why the placeholder isn't working as intended, or what steps I can take to debug this further would be greatly appreciated! I'm working on a CLI tool that needs to handle this. For context: I'm using Javascript on Ubuntu. Thanks in advance! I'm developing on CentOS with Javascript. What's the best practice here? This is part of a larger microservice I'm building. Am I missing something obvious? The project is a microservice built with Javascript. Any ideas how to fix this?