Lite-Server本地托管时网页图片不显示的问题求助

Hey there! I’ve dealt with this exact frustration before—local HTML loads images fine, but Lite-Server throws 404s. Let’s break down the most likely fixes step by step:

1. Double-Check Your Image Relative Paths #

When you open index.html directly via file://, your OS handles path resolution differently than an HTTP server like Lite-Server. Common mistakes here:

• Using absolute file paths (e.g., C:\my-project\images\logo.png)—servers don’t recognize local filesystem paths.
• Using incorrect relative paths. For example, if your folder structure looks like this:

  my-project/
  ├── index.html
  ├── images/
  │   └── logo.png
  └── bs-config.json
  

  Your image tag should use <img src="images/logo.png"> or <img src="./images/logo.png">—not something like ../images/logo.png (which would look one level above your project root).

2. Verify Lite-Server’s Root Directory Configuration #

Lite-Server defaults to using your project’s root folder as the server base, but if your index.html is in a subfolder (like src/), you need to explicitly set this in bs-config.json:

{
  "server": {
    "baseDir": "./src"
  }
}

Make sure your image paths are relative to this base directory. For example, if src/ contains index.html and an images/ folder, use <img src="images/logo.png">.

3. Check for Conflicting Routes in bs-config #

If you’ve added custom routes to bs-config.json, they might be redirecting image requests to the wrong location. For example, a route like this would break requests to /images:

{
  "routes": {
    "/images": "/assets"
  }
}

Either remove the conflicting route, or adjust your image paths to match the redirected location (e.g., use /assets/logo.png instead of /images/logo.png).

4. Clear Browser Cache #

Sometimes browsers cache old 404 responses, even after you fix the path. Force a hard refresh to clear the cache:

• Windows/Linux: Ctrl + Shift + R
• Mac: Cmd + Shift + R

5. Ensure Filename Case Matches #

Windows filesystems are case-insensitive, but Lite-Server (especially if running on WSL or Linux) enforces case sensitivity. If your image is named Logo.png but your HTML uses <img src="images/logo.png">, you’ll get a 404. Double-check that filenames and paths match exactly in case.

6. Test the Image URL Directly #

To confirm the issue is with the path, paste the full image URL into your browser (e.g., http://localhost:3000/images/logo.png). If this returns a 404, the path is definitely incorrect. If it loads, check for typos in your HTML’s image src attribute.

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