Bootstrap与Apache兼容问题：本地打开正常，Apache服务下资源丢失

阿华AIGC实验室

2026-5-19

解决Apache访问Bootstrap模板时字体和图片消失的问题

这问题我碰到过好多次了，大概率是资源路径引用错误导致的——本地直接打开index.html时，浏览器用的是文件系统的file://协议，路径解析基于你本地文件的层级；而Apache启动后用的是HTTP协议，路径是相对于服务器根目录（也就是/www/html/）的，两者规则不一样，所以会出现本地正常、服务器访问异常的情况。下面给你一步步排查和解决的方法：

检查资源的相对路径
打开你的index.html文件，仔细查看所有<img>标签的src属性，还有CSS文件里@font-face的src、background-image的路径：
- 如果引用写的是../assets/images/logo.png这类带上级目录的路径，而你的模板已经直接放在/www/html/下，那应该把前面的../去掉，改成assets/images/logo.png；
- 如果是写死的本地绝对路径（比如C:/Users/xxx/Downloads/...），那必须改成相对于/www/html/的相对路径，否则Apache根本找不到这些资源。
修复文件权限
Apache运行的用户（通常是www-data或者apache）需要有读取/www/html/下所有资源文件的权限。你可以用以下命令修改权限：
```
sudo chmod -R 755 /www/html/
sudo chown -R www-data:www-data /www/html/
```
这能确保Apache服务器可以正常访问到图片、字体这些静态资源。
验证Apache的根目录配置
打开Apache的配置文件（比如Ubuntu下是/etc/apache2/sites-available/000-default.conf，CentOS下是httpd.conf），确认DocumentRoot的设置是：
```
DocumentRoot /www/html
```
要是你的模板是放在/www/html/的子文件夹里（比如/www/html/my-bootstrap-template/），那访问时得用localhost/my-bootstrap-template/，而不是直接访问localhost，否则会找不到子文件夹里的资源。
强制刷新浏览器缓存
有时候浏览器会缓存之前错误的资源路径，导致修改后还是不显示。你可以按Ctrl+Shift+R（Windows/Linux）或者Cmd+Shift+R（Mac）强制刷新页面，清除缓存后再看看效果。