被多目录下html/php文件引用的头文件如何正确引用图片资源

问题根因 #

1. 相对路径的缺陷：相对路径是相对于当前访问的页面路径计算的，不同层级目录的页面引入公共头文件时，路径的相对基准不一致，自然会出现资源找不到的问题。
2. 本地磁盘绝对路径无效的原因：HTML中的href、src属性是由客户端浏览器解析的，浏览器无法读取服务器的本地磁盘路径，所以写C:/xxx这类路径完全无法生效。

可行解决方案 #

方案1：使用站点根相对路径（最简单） #

路径以/开头，代表从站点的域名根目录开始计算，不管当前页面在哪个子目录，路径基准都是统一的。
比如你本地XAMPP环境下，站点访问根路径是http://localhost/login/website php version/，那么头文件里的路径直接修改为：

<header>
    <div id="menu">
    <div class="table">
        <ul id="horizontal-list">
            <li><a href="/login/website php version/home page/home.php">            <img src="/login/website php version/home page/home.png"            alt="Home Page"         width=150                                   /></a></li>
            <li><a href="/login/website php version/dashboard page/dashboard.php">  <img src="/login/website php version/dashboard page/dashboard.png"  alt="User Dashboard"    width=150   style="padding-left: 35px;"     /></a></li>
        </ul>
    </div>
</header>

如果后续部署到线上，把路径前缀改成线上站点的根路径后缀即可。

方案2：使用PHP全局常量定义根路径（适配多环境） #

如果需要同时适配本地开发和线上部署，不想每次上线批量改路径，可以在公共配置文件中定义全局根路径常量：

1. 新建一个公共配置文件比如config.php，在所有页面引入头文件前先引入该配置，写入以下内容：

// 本地开发环境用这个
define('BASE_URL', 'http://localhost/login/website php version/');
// 线上部署时改成你的域名即可
// define('BASE_URL', 'https://www.your-domain.com/');

2. 修改头文件中的路径，拼接常量即可：

<li>
    <a href="<?php echo BASE_URL; ?>home page/home.php">
        <img src="<?php echo BASE_URL; ?>home page/home.png" alt="Home Page" width=150 />
    </a>
</li>
<li>
    <a href="<?php echo BASE_URL; ?>dashboard page/dashboard.php">
        <img src="<?php echo BASE_URL; ?>dashboard page/dashboard.png" alt="User Dashboard" width=150 style="padding-left: 35px;" />
    </a>
</li>

优化建议 #

路径目录名尽量不要包含空格，建议把home page、dashboard page改成home_page、dashboard_page这类无空格的命名，避免部分服务器对空格的解析异常。

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