HTML中Img Src标签无法正常显示，无论使用何种引用链接类型

Hey there! I’ve been right where you are—nothing’s more frustrating than an image that just refuses to load, especially after testing with a simple HTML file. Let’s break down the most likely culprits and fix this step by step.

First, let’s look at your test code:

<html>
<head>
    <title> </title>
</head>
<body>
    <img src="/images/Kanhaji.jpg" alt="HTML5 Icon" width="128" height="128" />
</body>
</html>

The biggest red flag here is the absolute path /images/Kanhaji.jpg. When you open a local HTML file directly (using the file:// protocol), that leading / points to your computer’s root directory—not your project folder. That’s almost certainly why the image isn’t loading.

Let’s walk through the most common fixes:

• Fix your file path (the #1 culprit)
  Switch to a relative path instead, which references files relative to your HTML file’s location:

  • If your HTML file is in your project root, and images is a subfolder right next to it, use src="images/Kanhaji.jpg" (no leading slash).
  • If your HTML is in a subfolder (e.g., pages/index.html), use src="../images/Kanhaji.jpg" to jump up one directory first.
  • Pro tip: Test the path directly! Copy the path you’re using, paste it into your browser’s address bar (after your page’s URL if using a local server), and see if the image loads. If it doesn’t, the path is wrong.

• Double-check filename and case sensitivity
  Operating systems like Linux and macOS are case-sensitive—Kanhaji.jpg is not the same as kanhaji.jpg. Make sure the filename in your src matches the actual file exactly, including capitalization. Also, confirm the file extension is correct (e.g., don’t use .jpg if the file is actually a .png).

• Verify the image file isn’t corrupted
  Try opening the image in a photo editor (like Preview on Mac or Paint on Windows). If it won’t open, the file is probably damaged—replace it with a working copy.

• Use a local development server
  When you open HTML files directly with file://, browsers often restrict access to local files for security. Spin up a quick local server to avoid this:

  • For Python 3: Run python -m http.server in your project folder, then visit http://localhost:8000 in your browser.
  • For Python 2: Run python -m SimpleHTTPServer instead.

Here’s a revised test code example with a correct relative path:

<html>
<head>
    <title>Image Test</title>
</head>
<body>
    <img src="images/Kanhaji.jpg" alt="Kanhaji Image" width="128" height="128" />
</body>
</html>

Start with checking the path—this solves 90% of missing image issues. If that doesn’t work, move through the other steps, and you’ll have your image showing up in no time!

内容的提问来源于stack exchange，提问作者Kanha_ji