从 Nginx 提供的 HTML 不显示图像答案

【问题标题】：HTML served from Nginx does not display images从 Nginx 提供的 HTML 不显示图像
【发布时间】：2022-02-02 21:06:45
【问题描述】：

我遇到了 Nginx 配置问题。我已启用 proxy_intercept_errors 并创建了重写规则以显示服务器目录中的特定 HTML 页面，以防出现 404、502、503 错误之一。我已经测试了这些错误代码，它们被正确拦截，并显示了必要的带有文本的 HTML 页面。但问题是这些图像不知何故没有显示在我的自定义 HTML 页面中。可能是文件路径或 Nginx 配置有问题。

服务器上的 HTML 文件位置：

/var/www/html/

图片位置：

/var/www/html/images/

对于上述目录，我设置了 chmod 755，但对于文件 chmod 644

Nginx 设置：

server {
    listen 443 ssl http2;
    server_name example.net;

    proxy_intercept_errors on;
    root /var/www/html;
    error_page 404 @404;
    error_page 502 @502;
    error_page 503 @503;

    access_log      /var/log/nginx/example.net.ssl.access.log;
    error_log       /var/log/nginx/example.net.ssl.error.log;

    ssl_certificate         /etc/letsencrypt/live/example.net/cert.pem;
    ssl_certificate_key     /etc/letsencrypt/live/example.net/privkey.pem;

    location / {
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:8080;
    }

    location @404 {
      rewrite ^(.*)$ /404.html break;
    }

    location @502 {
      rewrite ^(.*)$ /502.html break;
    }

    location @503 {
      rewrite ^(.*)$ /503.html break;
    }

HTML 文件内容：

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<title>404</title>
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>
<body>
   <img src="/var/www/html/images/404.jpg" alt="404 Not Found" style="width:50%;">
</body>
</html>

当我将 Nginx 中的位置直接更改为图像文件时，它们会被正确地提供和显示。图片不显示的问题仅在提供 html 文件时出现。

【问题讨论】：

/var/www/html/images/404.jpg 看起来像一个路径名。 src=属性应该是URL，大概是/images/404.jpg
@RichardSmith，我也试过 src="/images/404.jpg"，但还是不行。
“当我将 Nginx 中的位置直接更改为图像文件时”是什么意思？您问题中的 server 块是否应该提供图像，因为它当前将每个请求（包括 /images/404.jpg）发送到 localhost:8080
@RichardSmith，默认情况下它应该将每个请求发送到 localhost:8080，但是当出现其中一个错误代码时，它必须将位置更改为自定义 html，例如在 404 的情况下，它必须改为404.html。使用“当我将 Nginx 中的位置直接更改为图像文件时”？我的意思是，如果在我使用 404.jpg 图像的位置，它可以工作，但从 404.html 开始，它无法显示图像。

标签： html nginx

【解决方案1】：

你需要告诉 Nginx 如何处理/images/404.jpg URL。它不知道它来自先前的error_page 404 异常。对导致error_page 404 异常的 URL 的请求和对图像的 URL 的请求本质上是相互独立的。

假设localhost:8080 永远不需要看到任何以/images/ 开头的URL，只需添加一个简单的location 块：

location /images/ {}

它将使用外部块中定义的root 的值。

如果localhost:8080 需要查看一些以/images/ 开头的网址，请使用更具体的规则：

location = /images/404.jpg {}
location = /images/502.jpg {}
location = /images/503.jpg {}

【讨论】：

谢谢！这个有效。