HTML子页面图片无法显示求助：疑为路径引用问题

问题核心 #

你在HTML子页面无法加载crab.jpg，本质是子页面与主页面的相对路径基准不一致。主页面index.html位于Websites文件夹根目录，所以Websites/pics/crab.jpg能正常生效，但子页面若处于不同层级目录，这个路径就会失效。

针对性解决方案 #

根据子页面的实际位置调整图片路径：

• 子页面与index.html同目录（Websites根目录）：
  排查是否存在大小写匹配问题（比如系统区分大小写，实际文件名为Crab.jpg），或确认crab.jpg是否确实在Websites/pics/目录下，路径本身无需修改。

• 子页面在Websites的子文件夹中（例如Websites/subpages/detail.html）：
  使用../回到上一级目录，修改路径为：

  <img src="../pics/crab.jpg" width="400" height="400"/>
  

• 使用网站根目录绝对路径：
  若Websites是服务器的网站根目录，直接用根路径开头的绝对路径：

  <img src="/pics/crab.jpg" width="400" height="400"/>
  

  若Websites是根目录下的子文件夹，路径改为：

  <img src="/Websites/pics/crab.jpg" width="400" height="400"/>
  

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