Next.js Image Component scenarios to Load Local Images with Custom Webpack Configuration
I'm having a hard time understanding I'm having trouble with the Next.js Image component when trying to load local images after customizing my Webpack configuration... I upgraded to Next.js v13.1 and set up a custom Webpack config to handle image optimization differently, but now the images aren't rendering at all in my application. I’ve defined the custom loader in my `next.config.js` like this: ```javascript const nextConfig = { images: { loader: 'custom', path: '', }, webpack: (config) => { config.module.rules.push({ test: /\.(png|jpg|jpeg|gif|svg)$/, use: [ 'file-loader', ], }); return config; }, }; module.exports = nextConfig; ``` However, when I use the `<Image>` component like this: ```jsx import Image from 'next/image'; export default function MyComponent() { return <Image src="/images/my-image.png" alt="My Image" width={500} height={300} />; } ``` I receive the behavior: `behavior: Image with src "http://localhost:3000/images/my-image.png" does not have an appropriate loader.` It seems like the custom loader setup isn't being picked up or isn't working as intended. I've tried debugging this by logging the Webpack config and verifying that my rules are correctly applied, but I still need to figure out why the images won't load. I've also ensured that the image files are present in the correct directory. Is there something I might be missing in my setup or any other way to properly integrate local images with a custom loader in the Next.js Image component? My development environment is Windows. The project is a service built with Javascript.