CSS背景图片无法显示求助：Chrome报文件不存在但路径无误

问题描述 #

通过CSS和HTML为网站头部设置背景图片，图片占位已被占用，但图片本身无法显示。Chrome开发者工具提示文件不存在，但确认文件路径正确，寻求解决办法。

文件结构说明 #

项目文件结构如下：

• 根目录下有index.html
• 根目录包含css文件夹（存放styles.css和bootstrap.min.css）
• 根目录包含images文件夹（存放目标图片resturant-logo_large.png）

当前效果说明 #

目标图片应显示在“David Chu's China Bistro”左侧的空白位置，但目前该位置仅为空白占位，图片未加载。

HTML 代码 #

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>David Chu's China Bistro</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oxygen&family=Salsa&display=swap" rel="stylesheet">

  </head>
<body>
    <header>
        <nav id="header-nav" class="navbar navbar-default">
            <div class="container">
            <div class= "navbar-header">
             <a href="index.html" class=" pull-left">
                <div id="logo-img"> <img src=""></div>
            </a>
   
           
   
      <a class="navbar-brand" href="index.html"><h1> David Chu's China Bistro</h1>
        <img alt="Brand">
      </a>
    </div>
  </div>
</nav>



    </header>

CSS 代码 #

body {
  font-size: 16px;
  color: #fff;
  background-color: #61122f;
  font-family: 'Oxygen', sans-serif;
font-family: 'Salsa', cursive;
}
#header-nav{
    background-color: #f6b319;
    border-radius:0;
    border: 0;
}
#logo-img {
    background: url('images/resturant-logo_large.png') no-repeat;
    width: 150px;
    height: 150px;
    margin: 10px 15px 10px 0;

}
.navbar-brand{
    padding: 0px;
    margin: 0;
}

排查与解决步骤 #

1. 修正CSS路径引用
   CSS文件位于css文件夹中，当前路径images/resturant-logo_large.png是相对css文件夹的，会去css/images/查找文件，导致找不到。修改路径为：

   #logo-img {
       background: url('../images/resturant-logo_large.png') no-repeat;
       /* 其他样式保持不变 */
   }
   

   ../表示回到上一级目录（根目录），再指向images文件夹，即可正确定位图片。

2. 核对文件名细节
   确认图片文件名拼写是否准确（比如是否是restaurant而非resturant），同时检查文件名大小写是否与实际文件一致（Linux系统下文件名区分大小写）。

3. 直接验证图片可访问性
   在浏览器地址栏输入图片的绝对路径（如http://你的域名/images/resturant-logo_large.png），如果无法访问，说明文件不存在或权限异常，需要确认图片是否真的在images文件夹中，以及文件权限是否允许浏览器读取。

4. 清除浏览器缓存
   浏览器缓存可能导致旧的错误路径未更新，按Ctrl+Shift+R（Chrome）强制刷新页面，清除缓存后重新加载。

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