nginx custom error page 502 with css and image files

Question

I'm trying to add a custom error page for 503. I added these lines to server conf in nginx.conf file:

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

It displays the custom page when uwsgi is down, however this doesn't show any images. I tried many different configurations I can think of, but no luck. How I can display image file and enable css for a custom error page?

I put my custom error page into /home/username/sites/myProject/current/errorPages and the file structure is:

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

Answer 1

I just had the same problem, and what did work is setting the nginx conf like this :

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;
}

And then reference the image simply as src="image.png". The same should apply to your css and js!

Edit : I find a way to make it work for a bunch of file:

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

This way all the files in the errorPages folder will be available (e.g. src="/errorPages/image.png"), as nginx will try to match all "/errorPages/...". It is necessary to remove both the "=" after "location" (as it's not an exact match anymore) and the "internal;" in it (as the other resources will be called from the html and not internally by nginx).

Answer 2

The reason that your image/css is not shown/loaded, is because you're using the internal directive. The internal directive specifies that a given location can only be used for internal requests, and is not available or accessible from the outside (i.e. http://mysite/errorPages/500.html). Thus, a 404 error on its turn is given for these files.

A few workarounds are:

1. Remove the internal directive

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

2. Use css inline styles for your error pages. This however won't work for your images, or other files that are linked to your page.
3. Place the css and image files outside of the errorPages folder, and refer to them in your html code, with a relative path, starting from the root of your website.

Answer 3

I think the best approach is to do the following things:

• Use inline CSS
• Convert your images to Base64

After doing this, you can embed the generated Base64 string into the background-image CSS rule as follows:

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

You can use the string with the <img> tags as well, just pass it to the src attribute as follows:

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

This way you can keep the internal nginx rule.