A 404 image nobody investigated

An image on my page just shows the little broken picture icon, and I don't know why.

Beginner to intermediateRead 4 minDoing: about twenty minutes6 steps

▶ Start

What you'll have at the end

The exact broken file path found in the Network panel, and the image loading again.

Before you start

You need

A page in your own project with at least one image showing the broken-image icon, open in Chrome with DevTools already open.

Not covered

An image that fails to render for a reason other than a 404, such as a CORS block or a corrupted file that still returns 200: those show up differently in the Network panel and need a different check.

Leans on

HTML Cheat SheetThe img element's src attribute, and how a document's base URL decides where a relative path points.
Chrome DevTools Cheat SheetThe Network panel's Img filter and Headers tab, plus the Elements panel's live attribute editing, that you move between while doing this.

6 steps

Where to go next

Follow a stack trace back to find whose file is failing

when the broken thing is a script instead of an image, you follow the same kind of trail from a red console error line instead of a broken picture icon

Checked 20 Aug 2026

Part of the Chrome DevTools cookbook