Next.js Image Optimization Causing 404 Errors for Missing Images in Static Export
Does anyone know how to I'm trying to implement I'm having trouble with I'm experiencing 404 errors for images that are supposed to be served from the public directory after running a static export of my Next.js app (v12.0.7)... I have the following image setup: ```jsx import Image from 'next/image'; const MyComponent = () => { return ( <div> <Image src="/images/my-image.png" alt="My Image" width={500} height={300} /> </div> ); }; export default MyComponent; ``` The images are located in the `public/images/` directory. When I build the project using `next build` followed by `next export`, it looks like the image paths are not resolving correctly. In my production build, I can see that the image URL is being generated as `https://mywebsite.com/images/my-image.png`, but it results in a 404 behavior in the browser. I've confirmed the image file exists in the `public/images/` directory and it’s not being ignored by any configuration. Additionally, I tried clearing the cache and redeploying, but the scenario continues. Here’s my `next.config.js`: ```javascript module.exports = { images: { domains: ['mywebsite.com'], path: '/_next/image', }, }; ``` I also tried to use a different image by placing it in a new directory, but the same 404 scenario occurred. Any suggestions on what could be causing the missing images in the static export? Is there a specific configuration I might be overlooking? I recently upgraded to Javascript stable. What am I doing wrong? I recently upgraded to Javascript latest. Thanks, I really appreciate it!