11

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
1
  • How do tou refer to this CSS/images in your 50x.html?
    – Alexey Ten
    Dec 23, 2014 at 6:12

4 Answers 4

24

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).

2
  • 1
    In your second approach location /errorPages/50x.html { should be location /errorPages {. Otherwise it can't find images under errorPages folder.
    – Ikrom
    Aug 16, 2016 at 4:07
  • @Ikrom Thanks! I just checked my conf and indeed it should be /errorPages/
    – Shautieh
    Sep 13, 2016 at 9:29
4

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.

1
  • Inline styles might be forbidden by CSP headers. Feb 23, 2020 at 20:01
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.
2

This worked for me:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.