AI & Agent Dev Bug Sandbox logo
AI & Agent Dev Bug Sandbox
Back to Radar

Next Image Component Fails On Relative Src Redirecting To External Image

When using next/image with a relative src that returns a 302 redirect to an external image, the built-in image optimizer does not follow the redirect and returns a 500 Internal Server Error, while a native <img> displays correctly.

highConfidence 85%Next.jsAffected V16.4.0-Canary.15

Origin Analysis

The Next.js image optimizer uses fetch to retrieve the image from the provided URL, but its fetch configuration does not follow redirects (or follows them without validating allowed domains), resulting in the 302 response being treated as the image payload. This fails content-type validation and produces a 500 error.
1. Create a Next.js project with a route /redirected-image that returns a 302 to an external image URL. 2. Use next/image with src='/redirected-image'. 3. Start the dev server and load the page; the image fails with a 500 error while a native img tag renders.

Fixing Code Block

Edge Case Audit

Bypassing the optimizer disables automatic image optimization (compression, format conversion, CDN caching, etc.) and may load large original images, impacting performance. It also removes server-side domain validation, but the browser handles redirects safely. Revert to the default loader once the official fix is released.

Ecosystem Topology