Html 带有css和图像文件的nginx自定义错误页面502

我正在尝试为503添加自定义错误页。我将这些行添加到nginx.conf文件中的服务器conf中：

error_page 500 502 503 504 /50x.html;
location = /50x.html {
    root  /home/username/sites/myProject/current/errorPages;
    internal;
}

当uwsgi关闭时，它会显示自定义页面，但不会显示任何图像。我尝试了许多我能想到的不同配置，但没有运气。如何显示图像文件并为自定义错误页面启用css

我将自定义错误页面放入

/home/username/sites/myProject/current/errorPages

文件结构为：

errorPages/50x.html
errorPages/50x_files/50x.css
errorPages/50x_files/50x.js
errorPages/50x_files/image.png

---

我也遇到了同样的问题，工作原理是将nginx conf设置为这样：

error_page 500 502 503 504 /50x.html;
location = /50x.html {
  root  /home/username/sites/myProject/current/errorPages;
}
location = /image.png {
  root /home/username/sites/myProject/current/errorPages/50x_files;
}

然后将图像简单地引用为src=“image.png”。同样的道理也适用于你的css和js

编辑：我找到了一种方法，使其适用于一堆文件：

error_page 500 502 503 504 /errorPages/50x.html;
location /errorPages/ {
  root  /home/username/sites/myProject/current/;
}

---

这样，errorPages文件夹中的所有文件都将可用（例如src=“/errorPages/image.png”），因为nginx将尝试匹配所有“/errorPages/…”。有必要删除“location”之后的“=”和其中的“internal；”（其他资源将从html中调用，而不是由nginx内部调用）。

没有显示/加载图像/css的原因是您使用的是

internal

指令。

internal

指令指定给定位置只能用于内部请求，并且不能从外部访问（即）。因此，对于这些文件，会出现404错误

以下是一些变通办法：

删除内部指令

error_page 500 502 503 504 /50x.html;
location = /50x.html {
    root  /home/username/sites/myProject/current/errorPages;
}

对错误页面使用

css内联样式。但是，这不适用于您的图像或链接到页面的其他文件

将css和图像文件放在errorPages文件夹之外，并在html代码中引用它们，从网站的根目录开始，使用相对路径

---

我认为最好的办法是做以下几件事：

• 使用

  内联CSS

• 将图像转换为

  Base64

完成此操作后，您可以将生成的Base64字符串嵌入

背景图像

CSS规则，如下所示：

背景图像：url（数据：image/png；base64，iVBORw0KGgoAAAANSUhEADI….=）

您可以使用带有

属性的字符串，如下所示：



通过这种方式，您可以保留
内部
nginx规则。
您如何在
50x.html
中引用此CSS/图像？在第二次进近中，location/errorPages/50x.html{应该是location/errorPages{.否则它在errorPages文件夹下找不到图像。@Ikrom谢谢！我刚刚检查了我的配置，实际上它应该是
/errorPages/
内联样式可能被CSP标题禁止。