求助：GitHub托管的HTML网页无法显示本地图片

Hey there! I’ve dealt with this exact headache more times than I can count when putting HTML up on GitHub Pages. Let’s walk through the most likely fixes to get your images showing up properly:

• Double-check your file paths (the #1 culprit!)
  GitHub Pages serves your files from the root of your repository, so local absolute paths like C:/Users/YourName/Photos/image.jpg will never work. Stick to relative paths that match your repo’s folder structure. For example:

  • If your repo looks like this:

    my-github-repo/
    ├── index.html
    └── assets/
        └── sunset.png
    

    Your HTML should use <img src="./assets/sunset.png" alt="Sunset"> or <img src="/assets/sunset.png" alt="Sunset"> (the latter uses the repo root as the base).
  • Also, remember GitHub is case-sensitive! Sunset.png and sunset.png are treated as different files—make sure your path matches the exact filename in the repo.

• Verify your images are actually uploaded to GitHub
  It’s easy to forget to add images to your git commit. Head over to your repository on GitHub and navigate to the folder where your images should be. If they’re missing, run these commands locally to push them:

  git add path/to/your/images/*
  git commit -m "Add missing images"
  git push
  

• Wait for GitHub Pages to finish deploying
  Sometimes you’ll push changes, but Pages takes a minute or two to update. Check your repo’s Settings > Pages tab to confirm the deployment was successful (you’ll see a green "Your site is live at..." message when it’s done). If there’s an error, it’ll show up there too.

• Ditch the file:// protocol
  If your HTML uses src="file:///..." to reference images, this only works on your local machine. Replace these with relative paths as mentioned earlier—server-based environments like GitHub Pages can’t access your local file system.

• Clean up filenames and formats
  Avoid special characters (spaces, emojis, non-ASCII characters like Chinese characters) in image filenames—they can cause unexpected path errors. Stick to letters, numbers, underscores, and hyphens (e.g., vacation_photo.jpg instead of Vacation Photo!.jpg). Also, make sure your images are in supported formats: JPG, PNG, GIF, and SVG all work reliably on GitHub Pages.

If none of these work, pop open your browser’s developer tools (F12) and check the Console tab. You’ll see an error like 404 Not Found if the image path is wrong, which will point you exactly to what needs fixing.

内容的提问来源于stack exchange，提问作者Prajwal K Trivedi