Fix · Pages, phones and Arabic

Images do not load (broken image icon)

What you may see

Pictures show a broken icon or an empty box
They show on my computer but not online

Most likely cause

The address of the picture is wrong (path, capital letters, spaces, a computer path instead of a web path) or the file was not uploaded with the site.

Check first (about two minutes)

Right click the broken image and open its address in a new tab: what do you get?
Compare the file name in the code with the real file, including capital letters.

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 senior front-end engineer who knows HTML, CSS, React, phones and Arabic right-to-left pages, and explains things 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.

THE PROBLEM
Images do not load (broken image icon)

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 address of the picture is wrong (path, capital letters, spaces, a computer path instead of a web path) or the file was not uploaded with the site.

DO THESE STEPS, IN THIS ORDER
1. List each broken image with its address in the code and whether the file exists in the project.
2. Fix paths: web paths start from the site root (/images/x.jpg), not from a computer folder; match capital letters; avoid spaces and use plain Latin file names.
3. Make sure the files are in the folder the host publishes (for example the public folder) and are committed to Git.
4. For pictures from another site, check the framework image settings and that they use https.
Stop and tell me if what you see does not match a step. Do not skip ahead.

CHECK THAT IT WORKED
- Every image shows online, on a phone, in a private window.
Tell me exactly what I should see on the screen when it works.

DO NOT CHANGE
- Do not resize or replace my pictures without asking.
- 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

List each broken image with its address in the code and whether the file exists in the project.
Fix paths: web paths start from the site root (/images/x.jpg), not from a computer folder; match capital letters; avoid spaces and use plain Latin file names.
Make sure the files are in the folder the host publishes (for example the public folder) and are committed to Git.
For pictures from another site, check the framework image settings and that they use https.

Do not do this

Do not link to files on your own computer.
Do not resize or replace my pictures without asking.

Try another entry