NGINX自定义404页面图片加载失败问题排查求助

AI 小北

2026-5-11

我来帮你搞定这个404页面图片加载失败的问题！核心问题出在相对路径让浏览器找错了图片位置，再结合你的NGINX配置，咱们有两种靠谱的修复方案：

方案一：修改HTML里的图片路径为绝对路径

你现在写的<img src="404.gif" />是相对路径，当用户访问http://localhost/main/error_page这类子路径时，浏览器会默认在当前路径下找图片，也就是请求http://localhost/main/404.gif，但你的图片实际存在/var/www/error/目录下，NGINX只配置了/404.gif的访问规则，自然匹配不上。

把图片路径改成绝对路径就解决了：

<img src="/404.gif" alt="not found" />

这样不管用户从哪个子路径触发404，浏览器都会直接请求http://localhost/404.gif，正好命中你NGINX里的配置，图片就能正常加载了。

方案二：优化NGINX配置（可选，配合绝对路径更稳妥）

你可以把404相关的资源（HTML和图片）统一放在一个location规则里，让配置更简洁，同时避免遗漏：

http {
    server {
        listen 80;
        server_name localhost;

        error_page 404 /404.html;

        # 匹配404.html和404.gif，统一指向错误页面目录
        location ~ ^/(404\.html|404\.gif)$ {
            root /var/www/error/;
        }

        location ~ ^/main/(data|test)$ {
            # 这里一定要补上你的实际业务配置，比如指向静态文件目录或者代理后端
            # 示例：root /var/www/main/;
        }
    }
}

另外注意，你当前的location ~ ^/main/(data|test)$块是空的，实际使用时必须添加对应的资源路径（比如root）或者代理规则，否则访问这些合法路径也会返回404。