HTML与CSS开发中，非header区域图片无法正常显示求助

从现有代码中可直接定位的导致图片失效的硬错误 #

• 网络图片的引用逻辑错误
  你写的<img src="https://unsplash.com/photos/8uTqI_KpC_Q">用的是Unsplash的图片详情页地址，不是图片资源本身的直链。img标签只能解析以图片格式（.jpg/.png等）结尾的资源地址，加载这个网页地址时，返回的是一整个HTML页面，根本不是图片内容，必然显示破图。
• 本地图片的相对路径计算完全错误
  你的项目实际文件层级是清晰的：

  项目根目录/
  ├─ index.html（入口页面，和resources文件夹平级）
  └─ resources/
     ├─ css/
     │  └─ index.css
     └─ images/
        ├─ pink heart yarn.jpeg（header背景图，能正常显示）
        └─ gray yarn basket.jpeg
  

  你给本地图片写的路径是Knitting-Submission-Form/resources/images/gray yarn basket.jpeg，相当于在路径里多嵌套了一层项目外层文件夹。相对路径的计算逻辑是从当前HTML文件所在的位置出发，逐级找目标文件，不是从磁盘根目录套项目文件夹名。
  这也是为啥只有header的背景图能正常显示的原因：CSS文件在resources/css/目录下，写../images/xxx是从css目录往上退一级到resources目录，再进入images找文件，路径完全正确。
• 文件名带空格的解析风险
  你所有图片文件名里都带空格，部分静态服务器、浏览器在解析未做转义的带空格路径时，会直接截断路径导致404，长期开发中建议所有文件、文件夹命名都用短横线连接，不要留空格。
• CSS冗余语法错误
  你的CSS代码在div选择器的样式块结束后，多打了一个闭合大括号，会导致后续样式规则解析异常，虽然暂时不影响图片加载，但属于明确的语法bug：

  div {
      font-family: lora;
      padding-left: 20px;
  }
  } /* 这个单独的右大括号是多余的，直接删掉即可 */
  

具体修复操作步骤 #

• 网络图片引用：替换成以图片格式后缀结尾的直链地址，不要复制详情页的网页地址当图片src。
• 本地图片路径：修正为从index.html出发的正确相对路径，也就是./resources/images/gray yarn basket.jpeg，如果把文件名改成无空格的格式，就写./resources/images/gray-yarn-basket.jpeg。
• 理清常见路径写法的适用场景：
  • 用../是往上层目录退，如果你当前的index.html已经在项目根目录了，就不需要再往上退；
  • 用/开头的路径是针对部署后的静态服务器根目录的，如果是直接双击本地打开HTML文件（file协议），/开头的路径会直接定位到磁盘根目录，根本找不到项目内的文件，这也是你之前试了各种路径语法都不对的核心原因。

后续排查同类问题的通用方法 #

• 遇到破图时，直接右键点击破图占位符，选择“在新标签页打开图片”，看新标签页加载的地址是什么，和你实际的图片存放位置做对比，路径差在哪一目了然。
• 按F12打开开发者工具，切换到网络面板刷新页面，找到对应的图片请求：返回404就是路径写错了，返回的内容类型是text/html就是你把网页链接当图片引用了。

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