Fix broken Next.js images from a remote storage host

A normal image URL opens in a browser tab but the Next.js image component rejects it. The source may be valid while the image optimiser’s configuration does not permit it.

Why this happens

Remote-image configuration restricts which external sources the optimiser can fetch. Incorrect host, protocol or path patterns can reject an otherwise accessible URL.

Step-by-step solution

1. Read the optimiser error and inspect the exact URL used by the component. Confirm it is a public image response rather than an HTML login page.

2. Configure a narrow remotePatterns entry for the intended storage host and path. Restart or rebuild after changing framework configuration.

3. Supply the dimensions or fill layout required by the component and check that the parent has appropriate sizing. Keep useful alternative text.

Worked example

For Cloudinary, allow your specific cloud’s delivery path rather than every arbitrary host. A transformation URL must still match the permitted protocol, hostname and pathname.

Verify the fix

Test both a known valid image and an unapproved host. Confirm that image optimisation succeeds without broadly opening the fetch surface.

Prevent a repeat

Keep delivery URLs consistent and validate uploads before displaying them. Avoid globally disabling optimisation solely to hide a configuration error.

Reference

Official documentation or standards guidance

An original Gistmax troubleshooting guide. Scenarios and sample values are illustrative; configuration depends on your software version and environment. Cover diagram: Gistmax Tutorials.