Visual Studio中背景图片无法显示问题求助

1. 替换绝对路径为相对路径 #

你当前使用的/images/brass.jpg是绝对路径，在本地直接打开HTML文件时，它会指向系统根目录（比如Windows的C:\images\brass.jpg），而非项目内的图片文件夹，这是浏览器找不到图片的核心原因。

根据你的项目结构调整为相对路径：

• 若CSS文件与images文件夹在同一层级：

  background-image: url("./images/brass.jpg");
  

• 若CSS文件在css子文件夹，images在项目根目录：

  background-image: url("../images/brass.jpg");
  

2. 确认本地服务器的根目录配置 #

如果用VS Code的Live Server插件运行项目，务必打开整个项目文件夹而非单个HTML文件。Live Server会将你打开的文件夹作为根目录，此时绝对路径才能正确指向项目内的images文件夹。

3. 校验图片本身的有效性 #

• 检查文件名大小写是否完全匹配（Windows本地不区分大小写，但服务器环境下会严格区分）
• 直接在浏览器中打开图片文件，确认图片未损坏

4. 强制刷新浏览器缓存 #

浏览器可能缓存了旧资源，按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，加载最新资源。

内容的提问来源于stack exchange，提问作者Никита Егоров