Ubuntu Server下HTML无法加载图片及CSS文件（Windows正常）

1. 检查大小写一致性 #

Ubuntu Server基于Linux，对文件名和路径大小写敏感，而Windows不区分。请逐一核对：

• HTML中引用的styles.css与实际文件名完全一致（避免出现Styles.css/STYLES.CSS这类差异）
• images/search.png的文件夹名、文件名与实际文件系统中的名称完全匹配（比如不要把文件夹写成Images）

2. 修复文件与文件夹权限 #

Web服务器进程（如Nginx/Apache的www-data用户）需要具备读取静态资源的权限，执行以下命令调整：

# 赋予文件夹可读可执行权限（允许服务器遍历目录）
chmod 755 templates templates/images
# 赋予文件可读权限
chmod 644 templates/styles.css templates/images/search.png

注意：如果你的文件不在templates目录下，替换为实际路径

3. 确认Web服务器静态资源配置 #

• 纯静态HTML部署：确保Web服务器的根目录指向templates文件夹。比如Nginx需修改root配置项，Apache修改DocumentRoot，让服务器能正确找到templates下的CSS和图片文件。
• 后端框架部署（如Flask/Django）：这类框架默认从static目录加载静态资源，需调整：
  1. 将styles.css移至static目录，images文件夹也移入static
  2. 修改HTML中的引用路径：

     <link rel="stylesheet" href="/static/styles.css">
     <img src="/static/images/search.png">
     

4. 验证相对路径基准 #

HTML中的相对路径是相对于当前请求的URL，而非文件系统路径。例如若HTML通过http://your-server/search访问，styles.css会被请求为http://your-server/search/styles.css，而非templates/styles.css。这种情况下需改用绝对路径（以/开头），确保指向正确的文件位置。

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