Missing Images & onerror
Four scenarios — working, loud fail, silent fail,
and the graceful fallback. Open DevTools to see the truth.
The image in Scenario 1 is the Conway’s Game of Life SVG from the Movie Clips page — the exact file that triggered this lesson when it was accidentally left off the live server. The two “missing” images reference filenames (DEMO-MISSING-NO-ONERROR.png and DEMO-MISSING-WITH-ONERROR.png) that do not exist anywhere on this site and never will — they are intentional. Look for them by name in the DevTools Network tab.
Four Scenarios
Scenario 1
Image loads successfully
The file exists on the server. The image renders. onerror never fires. The Network tab shows 200 OK for this request.
Scenario 2
Missing — no onerror
The file does not exist. The browser shows its default broken-image indicator. Visible failure. Network tab: 404 Not Found.
Scenario 3
Missing — with onerror
display:none
The file does not exist. onerror fires and hides the element. Nothing visible to the user. But Network tab still shows 404 Not Found.
Scenario 4
Linked image — fallback src
Primary icon missing. onerror substitutes fallbackMovieIcon.png. The <a> stays visible — link is still clickable. this.onerror=null prevents an infinite loop if the fallback is also missing.
| Scenario | File exists? | onerror? |
What you see on the page | Network tab shows |
|---|---|---|---|---|
| 1 — Working | ✓ Yes | Yes (never fires) | Image displays correctly | 200 OK |
| 2 — Raw Fail | ✗ No | None | Broken-image symbol | 404 Not Found |
| 3 — Silent Fail | ✗ No | Yes — hides image | Nothing (element hidden) | 404 Not Found |
| 4 — Linked Fallback | ✗ No | Fallback src |
Placeholder icon; link clickable | 404 (primary) + 200 (fallback) |
display:none is safe because there is no parent <a>. Scenario 4 shows what happens when the <img> is also the navigation element: hiding it destroys the anchor’s clickable area along with the image. Substituting a fallback src keeps the anchor visible and reachable. this.onerror=null is essential — without it, if fallbackMovieIcon.png were itself ever missing, the browser would fire onerror again, attempt the fallback again, and loop until the browser gives up.
Verify It in DevTools — Step by Step
Scenarios 2 and 3 both produced 404 errors — but only Scenario 2 is visible on the page. DevTools sees both equally. Here is how to find them.
Open DevTools. Press F12 (Windows/Linux) or Cmd+Option+I (Mac), or right-click anywhere and choose Inspect.
Click the Network tab at the top of the DevTools panel.
Hard-reload the page: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac). This clears the browser cache and records every request fresh from scratch. A normal reload (F5) may serve cached assets and miss the 404s.
Look for red rows. Any request that failed with a 4xx status appears in red in the Network list. You should see two red rows: one for DEMO-MISSING-NO-ONERROR.png and one for DEMO-MISSING-WITH-ONERROR.png.
Click either red row to open its detail panel. In the Headers sub-tab, confirm Status Code: 404. Both failing scenarios show identical 404 responses — even though Scenario 3 is completely invisible on the page.
Optional: filter by type. In the Network tab toolbar, click Img to show only image requests. This removes CSS, JS, and font clutter and makes the three image rows — one 200, two 404 — immediately visible.
onerror is correct defensive practice, and it should stay on decorative images. But the deployment verification habit that catches Scenario 3 is DevTools Network, not your eyes.