An image that won't load is one of the most common problems beginners run into, and it almost never means anything is wrong with HTML itself. This guide covers the actual clue your browser already gives you when an image fails, walks through one real example with three distinct causes, and shows how to find which one applies to your own page.

Quick Answer

An HTML image usually fails to show up for one of a small set of reasons: the path in the src attribute doesn't actually point to where the file lives, the filename or its case doesn't match the real file exactly, the file was moved, renamed, or never uploaded, or the browser is blocking it, most often because a plain http image is being loaded on a secure https page. Unlike a CSS problem, a broken image isn't fully silent: the browser shows either the image's alt text or a small broken image icon in its place, which is already a clue worth reading rather than ignoring.

The One Clue Browsers Actually Give You

HTML auto corrects broken markup, and CSS silently drops anything invalid, covered in why your HTML might not be working. A failed image sits somewhere in between: the browser doesn't show an error message, but it doesn't pretend everything is fine either. Instead, it falls back to showing the alt attribute's text where the image would have been, or a small broken image icon if no alt text was written. That's not a bug, it's the browser telling you plainly that it tried to fetch a file and failed, which is exactly why writing meaningful alt text on every image matters well beyond accessibility, it's also your first diagnostic clue.

Quick Checklist: Check These Before Anything Else

1. Read the alt text or look for the broken icon. That's your confirmation the browser tried and failed, not a sign HTML is broken.
2. Open the image's src path directly in a new browser tab. If it doesn't load on its own, the problem is the path or the file, not your HTML.
3. Check the filename and folder name for an exact case match. Photo.JPG and photo.jpg are two different filenames as far as most web servers are concerned.
4. Confirm the path isn't pointing to your own computer. A path starting with file:/// only works on the machine it was written on.
5. Hard refresh the page. A cached version of the page can keep showing a missing image even after the file has been fixed or uploaded.

A Complete Example: Three Real Reasons an Image Won't Load

Assume a small project folder shaped like this:

project/
├── index.html
└── images/
    ├── logo.png
    ├── photo.jpg
    └── banner.png

And this HTML, with three images that all fail to display:

<img src="logo.png" alt="Company logo">
<img src="Photo.JPG" alt="Team photo">
<img src="file:///Users/alex/Desktop/banner.png" alt="Banner">

Here's what's actually wrong with each one:

• Bug 1, a missing folder in the path. logo.png looks in the same folder as index.html, but the real file lives inside images/. The path needs to include that folder: images/logo.png.
• Bug 2, a case mismatch. The real file is photo.jpg, all lowercase, but the HTML references Photo.JPG. Many local setups ignore this difference, but plenty of real web servers treat these as two completely different filenames.
• Bug 3, a local file path. file:///Users/alex/Desktop/banner.png points to one specific folder on one specific computer. It might work while testing on that machine, but it can never work for anyone else, or once the page is actually hosted anywhere.

Here's the same three images, fixed:

<img src="images/logo.png" alt="Company logo">
<img src="images/photo.jpg" alt="Team photo">
<img src="images/banner.png" alt="Banner">

All three now use a relative path, starting from where index.html itself lives, with the exact folder and filename case matching the real files. That combination, a correct relative path and an exact case match, resolves the large majority of real "image not showing" problems.

The Most Common Causes of "Image Not Showing"

• An incorrect relative path. The single most common cause, and the first thing worth checking, as shown in the example above.
• A case mismatch in the filename or folder. Works locally on some systems, fails once deployed to a case sensitive server.
• The file was moved, renamed, or never uploaded. The HTML is correct, but the file it's pointing to genuinely isn't there anymore.
• Mixed content on images. An http image referenced on an https page is typically auto upgraded by the browser to load over https instead, so it only fails if no secure version of that image actually exists at that address.
• Server permission errors. The file exists and the path is right, but the web server doesn't have permission to actually read and serve it.
• A stale cache. The image was fixed or added, but the browser, or the server, is still serving an older cached version of the page.

How to Actually Diagnose a Broken Image

1. Open your browser's developer tools and check the Network tab. A failed image request typically shows up with a status like 404, meaning the file wasn't found at that path, which immediately confirms it's a path problem, not something else.
2. Right click the broken image and try opening it in a new tab. If the browser can't find it that way either, the file itself is missing or the path is wrong somewhere upstream.
3. Compare the path in your HTML against the actual folder structure, character by character. This is where a case mismatch or a missing folder segment usually turns up.
4. Test the corrected path in a live editor before changing your real project. Confirming the fix works in isolation avoids uploading a second broken attempt. The full workflow for this is covered in how to build and test a complete web page.

Images referenced from CSS, such as a background-image property, follow the exact same path rules as an <img> tag's src, covered in more general terms in what CSS is and how it styles HTML pages, so the same diagnosis applies there too.

Mistakes That Make This Harder to Fix

• Assuming the image file itself is corrupted first. A wrong path is far more common than a genuinely broken file, and it's much quicker to rule out.
• Ignoring the alt text shown on the page. It's not just an accessibility feature here, it's confirmation of exactly which image failed, especially useful on a page with several images.
• Testing only on your own computer. A path that works locally, especially an absolute one, can behave completely differently once uploaded anywhere else.
• Not checking the Network tab. Guessing at the cause takes far longer than letting the browser tell you directly whether the request failed and why.

Expert Tips

• Keep image filenames lowercase and consistent from the start. It removes an entire category of bugs that only show up after deploying.
• Use relative paths for anything inside your own project, and reserve absolute URLs for images actually hosted elsewhere on the web.
• Write real, descriptive alt text on every image. Beyond accessibility, it turns a blank space into a readable clue the moment something fails to load.
• When in doubt, open the exact image path directly in a browser tab. It's the fastest way to confirm whether the problem is the path or something else entirely.

Important Notes

A missing image is a display issue, not a security concern, on its own. The one case worth attention is mixed content: browsers today generally try to auto upgrade an insecure http image to https automatically on a secure page, rather than blocking it outright. If that upgraded version doesn't exist, the image still fails, and the correct fix is updating the image's own URL to a working https address, not trying to force insecure content through.

FAQ

Why does my image show alt text instead of the picture?

The browser couldn't load the file behind the src attribute, so it falls back to displaying the alt text instead. Check the path, filename case, and whether the file actually exists at that location.

Why does my image work locally but not after uploading it?

This is frequently caused by an absolute local path, like one starting with file:///, or a filename case mismatch that a local system ignored but the server doesn't.

How do I know if the problem is the path or the image file itself?

Open the exact src path directly in a new browser tab. If it loads there, the HTML reference is wrong somewhere. If it doesn't load at all, the file itself is missing, misnamed, or inaccessible.

Why is my PNG image not showing while other images on the same page work fine?

This is usually specific to that one file, most often a typo in its particular path or filename, rather than a problem with the PNG format itself, which every modern browser supports.

Can a browser block an image even if the path is correct?

Yes, in effect. A common case is mixed content, where a secure https page references an insecure http image. The browser typically tries to load it over https automatically instead, and the image only fails if that secure version isn't actually available.

Conclusion

A broken image is rarely a mystery once you know what to check. The three bugs in the example above, a missing folder, a mismatched filename case, and a path that only exists on one computer, cover the large majority of real cases beginners run into. The browser already tells you something failed, through the alt text or the broken icon. The rest is just tracing the path back to where the actual file lives.

Sources: MDN Web Docs: The Image Embed element (img), MDN Web Docs: Mixed content.