Hey there! I’ve run into this exact problem before—let’s figure out what’s going on and get those images showing up when you open index.html directly.

Why This Happens #

• When you use VS Code’s Live Server, it spins up a local web server. The leading / in your image paths (/img/3 items.png) tells the server to look for the img folder at the server root (which is your project’s main folder), so everything works smoothly.
• But when you open the HTML file directly in a browser, you’re working in file system mode, not a server environment. The leading / here points to your computer’s system root (like C:\ on Windows or / on Mac), not your project folder. That’s why the browser can’t find your images—they’re not stored in your system root!

Quick Fixes to Try #

• Switch to relative paths: Remove the leading / from your image src attributes. So instead of:

  <img class="section-main--img1" src="/img/3 items.png" alt="Picture of all 3 colors" />
  

  Use:

  <img class="section-main--img1" src="img/3 items.png" alt="Picture of all 3 colors" />
  

  This tells the browser to look for the img folder relative to where your index.html file is located.
• Double-check path hierarchy: If your index.html is inside a subfolder (like a src folder), you’ll need to add ../ to go up one level first. For example:

  <img class="section-main--img1" src="../img/3 items.png" alt="Picture of all 3 colors" />
  

• Optional: Clean up filenames: Spaces in filenames can sometimes cause unexpected path parsing issues. Consider renaming your images to use underscores or hyphens instead (e.g., 3_items.png instead of 3 items.png)—it’s a small change that avoids potential headaches down the line.

How to Verify #

After updating the paths, open index.html directly in your browser. If you still see issues:

• Right-click the broken image and select "Inspect" to open DevTools.
• Check the Console tab for error messages—they’ll tell you exactly where the browser is trying to look for the image, which can help you tweak the path further.

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