裂图根本原因是Nginx未正确返回图片，主因是root路径拼接错误（如location /img/ + root /var/www/assets → 实际查找/var/www/assets/img/logo.png）、权限不足（目录缺x、文件缺r、属主不匹配或SELinux上下文不对）及前端src路径与Nginx服务路径不一致。

裂图不是图片本身坏了，而是 Nginx 没把图片正确返回给浏览器。根本原因通常出在 root 配置的路径拼接逻辑、权限控制或前端引用路径不匹配这三块上。

确认 root 路径拼接是否真指向了图片文件

Nginx 的 root 不是“替换前缀”，而是“拼接完整路径”。比如：

• 配置：location /img/ { root /var/www/assets; }
• 访问：https://example.com/img/logo.png
• 实际查找路径：/var/www/assets/img/logo.png（注意多了一个 /img/）

如果图片实际放在 /var/www/assets/logo.png，那它永远找不到——这就是最常见裂图原因。

✅ 正确做法：要么改用 alias /var/www/assets;（去掉 location 前缀），要么把图片挪到 /var/www/assets/img/ 下，保持路径结构一致。

立即学习“前端免费学习笔记（深入）”；

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

检查 Nginx 进程是否有权限读取该文件

即使路径拼对了，没权限照样 403 或裂图。重点看两件事：

• 执行 ps -eo pid,user,comm,args | grep nginx | grep worker，确认 worker 进程以哪个用户运行（如 www-data 或 nginx）
• 运行 ls -l /var/www/assets/img/logo.png 和 ls -ld /var/www/assets/img/，确保：
  • 目录有 x 权限（否则无法进入）
  • 文件有 r 权限（否则无法读取内容）
  • 属主/属组匹配运行用户，或至少其他用户（others）有对应权限

⚠️ 特别注意 SELinux：若启用，需用 ls -Z 查看上下文，必要时执行 chcon -R -t httpd_sys_content_t /var/www/assets。

比对前端 <img src="..."> 中的 URL 和 Nginx 实际服务路径

浏览器地址栏直接打开那个 src 地址，看返回什么：

• 返回 404 → 路径拼接或文件不存在
• 返回 403 → 权限或 SELinux 问题
• 返回空白或乱码 → MIME 类型未识别（检查 include mime.types 是否启用）
• 提示 “Refused to load the image because it violates the following Content Security Policy” → 后端或 CDN 开了防盗链，需配 add_header Referrer-Policy "no-referrer-when-downgrade"; 或联系服务方加白名单

验证静态资源 location 是否被其他规则覆盖

常见干扰项：

• location / 块里写了 proxy_pass，但没排除图片后缀，导致所有请求都转给了后端
• 多个 location ~* \.(png|jpg) 规则中，前面的优先级更高且没写 root，结果 fallback 到默认根目录
• root 写在 server 块，却被某个 location 里的 root 或 alias 覆盖

✅ 排查方法：临时注释掉其他 location，只留图片相关规则，再测试；或用 nginx -T 输出完整生效配置，人工核对匹配顺序。