How to Fix Images Not Loading on HTML Page from Local Folder

You build a simple HTML page, add a photo from a folder on your computer, open the page in a browser, and instead of the picture you see a small broken icon or an empty box. The file clearly exists, you can open it on your computer, yet the browser refuses to show it. This is one of the first problems almost every web beginner meets.

The encouraging part is that the fix is almost always simple. Browsers are strict about paths, file names and permissions, and one small mismatch is enough to break an image. This guide shows you how to check each possible cause in order and get your local images loading reliably every time.

Quick Answer

Images from a local folder usually fail to load because the path in the src attribute is wrong, the file name does not match exactly, or the image is not in the folder the path points to. Place the image in the same project folder as your HTML file, use a simple relative path like <img src="images/photo.jpg" alt="Description">, and check spelling, capital letters and the file extension. Refresh the page and the image should appear.

How the Browser Finds a Local Image

When a browser reads your HTML, it treats the src value as directions to the image file. A relative path gives directions starting from the location of the HTML file itself. If your page and your picture sit in the same folder, the direction is just the file name. If the picture sits in a subfolder called images, the direction becomes the folder name, a slash, and then the file name.

An absolute path, by contrast, gives directions from the root of the computer or the website, such as a full drive path. Absolute local paths are a common trap for beginners. A path copied from a file manager may work on one computer and fail everywhere else, and browsers may also block some local file paths for security reasons. For normal projects, relative paths are the correct and portable choice.

The browser also cares about exact matching. On many systems, Photo.JPG, photo.jpg and photo.jpeg are three different things. One wrong letter, one missing letter, or a space handled incorrectly is enough to produce the broken image icon.

Step-by-Step Fix for Local Images

Follow these steps carefully. They solve the problem in the vast majority of cases without any advanced tools.

1. Put everything in one project folder. Create a clear folder for the project and place your HTML file inside it. This gives you one known starting point for every path.
2. Create an images subfolder. Inside the project folder, make a folder named images in lowercase with no spaces. Copy your pictures into it.
3. Rename files simply. Give each image a short lowercase name with no spaces, such as team-photo.jpg. Avoid names like My Photo (1).JPG which invite path and extension mistakes.
4. Write the correct relative path. In your HTML, use <img src="images/team-photo.jpg" alt="Our team at work">. The path starts from the HTML file, enters the images folder, and ends at the exact file name.
5. Check the file extension. Open the folder and confirm whether the file is truly a .jpg, .png, .webp or .gif. Your code must match the real extension, not the one you assume.
6. Save the HTML file and refresh. Save your changes, then reload the page with Ctrl + Shift + R to avoid an old cached version hiding your fix.
7. Test by opening the image path directly. If the image still fails, check the exact spelling character by character against the file name in the folder, including capital letters.

Relative Paths You Will Use Most Often

Three relative patterns cover nearly every beginner project. If the image is in the same folder as the HTML file, use only the file name: src="photo.jpg". If it is in a subfolder, add the folder name: src="images/photo.jpg". If it is one folder above the HTML file, use two dots and a slash to go up: src="../photo.jpg". Each extra ../ moves up one more level.

Be careful with the first slash. Starting a path with a single slash, like src="/images/photo.jpg", tells the browser to start from the root of the site or drive, not from your project folder. When you open a file directly from your computer instead of through a local server, that root path often points to the wrong place and the image breaks.

Checking for Hidden Problems

If the path looks right and the image still refuses to load, check these less obvious causes before rewriting your page.

• The file is not really an image: A file renamed from another format, or a download that failed halfway, may carry an image extension but contain broken data. Open the file in an image viewer to confirm it works.
• Double extension: Some computers hide extensions, so a file that looks like photo.jpg is actually photo.jpg.txt or photo.jpg.jpg. Show file extensions in your file manager and check.
• Spaces and special characters: Spaces in names can work if written as they are, but they often cause confusion. Renaming to hyphens removes the whole class of problems.
• The HTML file was never saved: Your editor may show the new code while the browser still loads the old saved version. Save and refresh again.
• Wrong folder after moving files: Moving the HTML file to a new folder without moving the images folder breaks every relative path at once.

Browser developer tools give you proof instead of guesses. Press F12, open the Network tab, refresh the page, and look for your image file. A 404 status means the browser followed your path and found nothing there, so the path or name is wrong. If the image does not appear in the list at all, check that your img tag is written correctly and saved.

For a deeper look at correct image markup, resizing and modern options, see our HTML image tag and responsive images guide. The authoritative markup details live in the MDN reference for the img element, and the MDN guide to images in HTML explains paths and alternative text with beginner-friendly examples.

Good Habits That Prevent This Problem

Professional developers rarely hit this issue because their project structure is boring and consistent. Copy that approach. Keep one project folder, keep images inside a clearly named subfolder, and never link to pictures scattered across downloads, desktops or USB drives. When you copy an image into a project, copy the actual file into the images folder instead of linking outward to its original location.

Always add helpful alt text to every image. If an image ever does fail, the alt text tells visitors what should be there, and it is essential for screen reader users. Alt text also gives you a clue during debugging: if you see the alt text on the page, the tag exists but the file was not found.

Another strong habit is to test with a simple local development server once your projects grow, since it behaves much more like a real website.

Common Mistakes and Helpful Tips

The most common mistake by far is copying a full computer path such as C:\Users\Name\Pictures\photo.jpg into the src attribute. It may seem logical, but it breaks as soon as the folder moves or the site goes online, and browsers can refuse to load it. Always convert it to a short relative path inside your project.

A second mistake is trusting how a file name looks instead of checking it. Operating systems love to hide extensions and trim display names. Turn on the option to show full file names and extensions in your file manager when you build websites. That one setting prevents a large share of beginner image bugs.

Also watch for mixing slashes. Web paths always use forward slashes /, even on Windows. A path written with backslashes, like images\photo.jpg, is unreliable in browsers. Keep every path in web style.

A final tip: replace a failing image temporarily with a known working image from the same folder. If the replacement shows, the original file is the problem. If it also fails, the path is wrong.

Conclusion

Local images fail for practical reasons: the path points to the wrong place, the name or extension does not match exactly, or the file is not inside the project at all. Organize your project into one folder with an images subfolder, use short lowercase file names, write relative paths with forward slashes, and verify the result in the Network tab when in doubt. With that routine, broken image icons become a rare and quickly solved event.

Frequently Asked Questions

Why does the image show on my computer but not when I send the page to someone else?

Your page is probably pointing to a file on your own computer with a local path. The other person does not have that file in that place. Send the whole project folder including the images folder, and use relative paths so the structure travels together.

What does a 404 error on an image mean?

It means the browser followed the path in your src attribute and found no file there. Recheck the folder location, the file name spelling, capital letters and the extension.

Can spaces in an image file name cause problems?

Yes. Spaces can be written as %20 by browsers and are easy to mistype in code. Rename files with hyphens instead, such as my-photo.jpg, and update the path to match.

Should I use an absolute or relative path for local images?

Use a relative path for almost all projects. It stays correct when the project folder moves or gets published online, while an absolute path only works in one exact location on one computer.

Why do I see my alt text instead of the image?

The browser displays alt text when it cannot load the image file. Treat it as a useful signal: your tag exists, but the file was not found at the path you provided, so check the path and file name again.