Fix · Vercel and deploying

Next.js images fail on the live site (invalid host or 400)

Not checked against the vendor's current screens

What you may see

Images work locally but show broken online
Error says hostname is not configured under images

Most likely cause

The image comes from an outside address that the framework was not told to trust, or the image address is wrong online.

Check first (about two minutes)

Open the broken image address directly in a tab: does it load?
Check the error text for the host name it complains about.

The fix prompt

What you type here never leaves your browser. The search runs on this page, and nothing is sent to a server or to an AI.

The exact error or what you see

What you did before it happened

Kept only in this browser, on this device. Keys and passwords are removed before anything is saved.

Prompt language

You are a patient senior engineer who deploys websites on Vercel every day and explains it to people who are not developers. I am not a developer, so explain every step in plain words and tell me exactly which button, menu or command you mean. If you are not sure about something, say so; do not guess.

Menu and button names change over time. If you cannot find a button or page I mention, say so and tell me what to look for instead of guessing.

THE PROBLEM
Next.js images fail on the live site (invalid host or 400)

THE EXACT ERROR OR WHAT I SEE
[paste the exact error here]

WHAT I DID BEFORE IT HAPPENED
[write in a few words what you did before it happened]

MOST LIKELY CAUSE
The image comes from an outside address that the framework was not told to trust, or the image address is wrong online.

DO THESE STEPS, IN THIS ORDER
1. Find the image component and the source address of each broken image.
2. Add the trusted host to the framework's image settings (remote patterns), with the narrowest rule that works.
3. Check the image address is correct and public online; redeploy; test.
Stop and tell me if what you see does not match a step. Do not skip ahead.

CHECK THAT IT WORKED
- The images appear on the live site, also on a phone.
Tell me exactly what I should see on the screen when it works.

DO NOT CHANGE
- Do not turn image optimization off for the whole site.
- Anything I did not ask about: the design, the text, other pages, other settings or the data.
- Do not delete files, data or branches, do not reset or force-push, and do not rewrite history, unless you first show me exactly what would be lost and I say yes.
- Do not paste, print or ask me to paste a password or secret key into this chat. If one is needed, tell me which settings page of the right service to store it in.

WHEN YOU FINISH
Explain in simple words what you changed (file by file or setting by setting), why you changed it, and how I can undo it.

Paste it into Claude, ChatGPT, Gemini or Cursor, then follow what it says.

After you tried it, did it work?

Steps

Find the image component and the source address of each broken image.
Add the trusted host to the framework's image settings (remote patterns), with the narrowest rule that works.
Check the image address is correct and public online; redeploy; test.

Do not do this

Do not allow every host with a wildcard.
Do not turn image optimization off for the whole site.

Try another entry