HTML Image Not Showing? 12 Common Reasons & Easy Fixes

One of the most common problems beginners face while learning HTML is that an image simply doesn’t appear in the browser. Instead of the expected picture, you may see a broken image icon or nothing at all.

In most cases, the problem isn’t with HTML itself. It’s usually caused by an incorrect file path, a filename mismatch, or a small mistake in the <img> tag.

This guide explains the real reasons why an HTML image doesn’t show and how to fix each one.

Why Is My HTML Image Not Showing?

One of the most common reasons an HTML image doesn’t appear is a small mistake in the code or file setup. Problems like an incorrect image path, a wrong filename, an unsupported file format, a missing src attribute, or even browser cache can prevent the image from loading. The good news is that most of these issues are easy to identify and fix. Below, we’ll go through each possible cause and show you how to solve it step by step.

1. Verify the Image Path

The most common reason is an incorrect path. If your project looks like this:

project/
│
├── index.html
└── images/
    └── logo.png

Use:

<img src="images/logo.png" alt="Logo">

If the folder name or file location is different, the browser won’t find the image.

2. Check the File Name Carefully

Even one incorrect letter prevents the image from loading.

Example:

Actual file: Logo.png

HTML:

<img src="logo.png">

These are different filenames on many web servers. Always copy the filename exactly.

3. Make Sure the File Extension Is Correct

Many beginners accidentally write:

<img src="logo.jpg">

while the actual file is, logo.png

Common extensions include:

• .png
• .jpg
• .jpeg
• .gif
• .svg
• .webp

Always verify the actual extension.

4. Check Folder Structure

If the image is inside another folder, your path must match the folder structure.

Example:

project/

images/

products/

phone.png

Correct:

<img src="images/products/phone.png">

A missing folder name results in a broken image.

5. Don’t Forget the src Attribute

Without the src attribute, the browser doesn’t know which image to load.

Correct:

<img src="photo.jpg" alt="Photo">

Incorrect:

<img alt="Photo">

Always include a valid src.

6. Check Uppercase and Lowercase Letters

Windows often ignores letter case, but Linux hosting servers do not.

Example:

Actual file: Banner.png

HTML:

<img src="banner.png">

This may work locally but fail after uploading your website.

Keep filenames consistent.

7. Verify the Image Actually Exists

Sometimes the image was moved, renamed, or deleted without updating the HTML. Open the image directly from its folder. If it doesn’t open there, replace it with a working image.

8. Make Sure the Image Isn’t Corrupted

If the image file is damaged, browsers can’t display it.

Try opening it in:

• Windows Photos
• Preview (Mac)
• Another browser

If it doesn’t open anywhere, export or download the image again.

9. Clear Browser Cache

Sometimes your browser loads a cached version of the webpage instead of the latest one. As a result, recently added or updated images may not appear.

To force the browser to load the newest version of the page, perform a hard refresh.

Windows:

• Ctrl + Shift + R
• Ctrl + F5

After refreshing, check whether the image is displaying correctly.

10. Check Developer Tools

If the image still isn’t loading, use your browser’s Developer Tools to find the problem.

Press F12, open the Network tab, and refresh the page.

If the image request shows a 404 Not Found error, it means the browser cannot find the image file. In most cases, this happens because the image path, filename, or file location is incorrect.

Fix the file path and reload the page to see if the image appears.

11. Use Relative Paths Correctly

If your HTML file and image are stored in different folders, make sure you’re using the correct relative path. A small mistake in the folder structure can prevent the browser from finding the image.

For example, if your project is organized like this:

project/
├── pages/
│   └── about.html
└── images/
    └── team.jpg

Then the correct image path inside about.html is:

<img src="../images/team.jpg" alt="Team">

Here, ../ tells the browser to move up one folder from the pages directory before opening the images folder to locate team.jpg.

12. Make Sure the Image Format Is Supported

Most modern web browsers support popular image formats such as PNG, JPG, JPEG, GIF, SVG, and WebP. If your image uses an uncommon, unsupported, or corrupted format, the browser may fail to display it.

If you’re unsure about the file format, convert the image to PNG or JPG, as these are widely supported across all major browsers and devices. After converting the file, update the image path in your HTML and refresh the page to check if it loads correctly.

Conclusion

If your HTML image is not showing, the issue is almost always related to the image path, filename, file extension, or folder structure. Instead of changing random code, check each possibility one by one.

Start by confirming that the image exists, verify the src path, ensure the filename matches exactly, and use the browser’s Developer Tools to identify missing files. Following these steps will solve the majority of image loading problems and help you build more reliable HTML pages.