Next.js Image Component scenarios to Display Correctly on Nested Routes with Custom Loader
I'm having trouble with I'm not sure how to approach I'm currently using the Next.js Image component (version 12.1.0) in my application, but I'm running into an scenario when trying to display images on nested routes... I'm utilizing a custom loader to fetch images from an external API, and while it works flawlessly on my main route, the images unexpected result to load on nested routes, resulting in a broken image icon. For example, my custom loader is defined as: ```javascript const myLoader = ({ src }) => { return `https://myapi.com/images/${src}`; }; ``` And I use it in my component like this: ```javascript <Image loader={myLoader} src="image-id" alt="My Image" width={500} height={300} /> ``` However, when I navigate to a nested route like `/products/item`, the images do not display, and the console shows the following warning: ``` Warning: Image with src "https://myapi.com/images/image-id" was not found. ``` I've double-checked the URLs, and they are valid. The component renders without any errors on the main route (`/products`). I'm also using React Router for navigation, and the scenario seems to only occur on routes deeper than the main level. I've confirmed that the API responds with the correct image data, and there are no CORS issues. To troubleshoot, I've tried explicitly adding the `unoptimized` prop to the Image component, but this doesn't resolve the scenario. Additionally, I've tested the URLs directly in the browser and they work fine. I'm not sure if the question lies with how the nested routes are set up or if there's an scenario with the Image component handling the requests differently. Is there anything else I should check, or could this be a limitation of the Image component when used in nested routes? I'm on CentOS using the latest version of Javascript. For reference, this is a production microservice. Is there a better approach?