HtmlDebug / FixBeginner · 3 min read

How to Fix Image Not Showing in HTML: Simple Solutions

To fix an image not showing in HTML, first check that the src attribute points to the correct file path and file name. Also, ensure the image file exists in that location and the HTML syntax is correct with a proper <img> tag.

🔍

Why This Happens

Images often don't show because the browser can't find the file. This happens if the src path is wrong, the file name is misspelled, or the file is missing. Sometimes, incorrect HTML syntax causes the image not to load.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Broken Image Example</title>
</head>
<body>
  <img src="images/photo.JPG" alt="Sample Photo">
</body>
</html>

Output

No image appears; a broken image icon or empty space shows instead.

🔧

The Fix

Make sure the src attribute matches the exact file path and name, including correct letter case. Confirm the image file is in the right folder. Also, use a self-closing <img> tag with an alt attribute for accessibility.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fixed Image Example</title>
</head>
<body>
  <img src="images/photo.jpg" alt="Sample Photo" />
</body>
</html>

Output

The image 'photo.jpg' displays correctly on the page.

🛡️

Prevention

Always double-check file names and paths for typos and letter case. Use relative paths carefully and keep your project organized. Test your pages in the browser and use browser developer tools to spot missing files or errors. Adding descriptive alt text helps accessibility and debugging.

⚠️

Related Errors

Image not loading due to permission issues: Check file permissions to ensure the web server can access the image.
Wrong file format or corrupted image: Verify the image file is valid and supported by browsers (e.g., JPG, PNG, GIF).
Using absolute paths incorrectly: Avoid hardcoding full paths that may not work on other machines or servers.

✅

Key Takeaways

Always verify the src path and file name match exactly, including letter case.

Ensure the image file exists in the specified folder and is accessible.

Use proper <img> syntax with an alt attribute for accessibility.

Organize files and test your page in browsers to catch missing images early.

Check file permissions and formats if images still do not show.