Skip to content

Broken Image

Quick summary

Your `<img>` tag points to a file that doesn't exist, is in the wrong location, or failed to load — the browser shows a broken image icon.

Why this happens

  • Wrong file path in the src attribute

  • Image file was deleted, moved, or renamed

  • Case-sensitive filename mismatch on a case-sensitive server (Linux)

Minimal example

✗ Broken code
<img src="/images/hero.png">
✓ Fixed code
<img src="/images/hero.jpg" alt="Hero image">

The file is hero.jpg, not hero.png — the src path must match the actual filename. Always include alt text for accessibility.

How to diagnose

  • Open the image URL directly in the browser — does it load?

  • Check the Network tab in DevTools for a 404 status on the image

  • Verify the file exists at the path specified in src

How to fix

  • Correct the src path to match the actual file location

  • Use absolute URLs (https://...) for external images

  • Match the filename exactly, including case on case-sensitive servers

How to prevent

  • Use build tools (Vite, Webpack) that verify asset paths at build time

  • Keep images in a dedicated folder with consistent naming

Related Resources

Related Glossary

Related Lessons

  • HTML

    Learn HTML fundamentals

Related Practice

Related Tools

← Back to language