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

Question

我正在尝试为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

Answer 1

我只是遇到了同样的问题,并且做了什么工作就像这样设置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/...".有必要删除"位置"之后的"="(因为它不再是完全匹配)和"内部"; 在其中(因为其他资源将从html调用,而不是由nginx内部调用).

Answer 2

我认为最好的方法是做以下事情：

• 使用inline CSS
• 将您的图像转换为Base64

完成此操作后，您可以将生成的 Base64 字符串嵌入到background-imageCSS 规则中，如下所示：

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEADI.....==)

您也可以将字符串与<img>标签一起使用，只需将其传递给src属性即可，如下所示：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEADI.....==" />

这样就可以保持internalnginx规则。