求助：Hero图片无法显示但文本正常，路径配置问题排查

核心问题 #

你的CSS中.hero-image的背景图片路径使用了根路径（/city.jpg），但所有文件都在同一文件夹下，应该使用相对路径。根路径会强制从服务器根目录查找文件，而非当前文件夹。

修复方法 #

修改CSS中.hero-image的background属性，去掉路径开头的斜杠：

.hero-image {
  background: url("city.jpg"); /* 移除开头的/ */
  background-color:#cccccc;
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

也可以明确使用当前目录的相对路径（效果一致）：

background: url("./city.jpg");

额外排查点 #

如果修改后仍无法显示，检查以下几点：

• 图片文件名完全匹配（包括大小写，比如City.jpg和city.jpg在区分大小写的系统中是不同文件）
• 图片文件未损坏，能正常打开
• 确保VS Code的本地服务器（如Live Server）是从当前文件所在的文件夹启动的

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