Custom 404 error page with css and image

Help
1

1. The problem I’m having:

I have made a 404 html file with css and image.

getting the 404 to display works, but css and image in the 404 file is not loaded. I believe that is because they reside in a different folders.

folder tree is like this.

root
root/guldager/index.html
root/error/404html
root/error/css/style.css
root/error/images/img.gif

the image is linked to in the css file.

So my question is, how do I make external images load when displaying error pages that resides outside the given sites dir?

2. Error messages and/or full log output:

Failed to load resource (404) file not found

3. Caddy version:

caddy.Version=v2.7.4

4. How I installed and ran Caddy:

windows exe file in root of www folder.

a. System environment:

D:\www>caddy environ
caddy.HomeDir=C:\Users\admin
caddy.AppDataDir=C:\Users\admin\AppData\Roaming\Caddy
caddy.AppConfigDir=C:\Users\admin\AppData\Roaming\Caddy
caddy.ConfigAutosavePath=C:\Users\admin\AppData\Roaming\Caddy\autosave.json
caddy.Version=v2.7.4 h1:J8nisjdOxnYHXlorUKXY75Gr6iBfudfoGhrJ8t7/flI=
runtime.GOOS=windows
runtime.GOARCH=amd64
runtime.Compiler=gc
runtime.NumCPU=16
runtime.GOMAXPROCS=16
runtime.Version=go1.21.1
os.Getwd=D:\www

=::=::\
=C:=C:\Users\admin
=D:=D:\www
=ExitCode=00000001
ALLUSERSPROFILE=C:\ProgramData
APPDATA=C:\Users\admin\AppData\Roaming
ChocolateyInstall=C:\ProgramData\chocolatey
ChocolateyLastPathUpdate=133395870770325986
CommonProgramFiles=C:\Program Files\Common Files
CommonProgramFiles(x86)=C:\Program Files (x86)\Common Files
CommonProgramW6432=C:\Program Files\Common Files
COMPUTERNAME=SERVER
ComSpec=C:\WINDOWS\system32\cmd.exe
DriverData=C:\Windows\System32\Drivers\DriverData
EFC_9736=1
FPS_BROWSER_APP_PROFILE_STRING=Internet Explorer
FPS_BROWSER_USER_PROFILE_STRING=Default
HOMEDRIVE=C:
HOMEPATH=\Users\admin
LOCALAPPDATA=C:\Users\admin\AppData\Local
LOGONSERVER=\\SERVER
NUMBER_OF_PROCESSORS=16
OS=Windows_NT
Path=C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\dotnet\;C:\ProgramData\chocolatey\bin;D:\www;C:\Users\admin\AppData\Local\Microsoft\WindowsApps;D:\www;
PATHEXT=.COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JS;.JSE;.WSF;.WSH;.MSC
PROCESSOR_ARCHITECTURE=AMD64
PROCESSOR_IDENTIFIER=Intel64 Family 6 Model 158 Stepping 13, GenuineIntel
PROCESSOR_LEVEL=6
PROCESSOR_REVISION=9e0d
ProgramData=C:\ProgramData
ProgramFiles=C:\Program Files
ProgramFiles(x86)=C:\Program Files (x86)
ProgramW6432=C:\Program Files
PROMPT=$P$G
PSModulePath=C:\Program Files\WindowsPowerShell\Modules;C:\WINDOWS\system32\WindowsPowerShell\v1.0\Modules
PUBLIC=C:\Users\Public
SESSIONNAME=Console
SystemDrive=C:
SystemRoot=C:\WINDOWS
TEMP=C:\Users\admin\AppData\Local\Temp
TMP=C:\Users\admin\AppData\Local\Temp
USERDOMAIN=server
USERDOMAIN_ROAMINGPROFILE=server
USERNAME=admin
USERPROFILE=C:\Users\admin
windir=C:\WINDOWS
ZES_ENABLE_SYSMAN=1

b. Command:

Windows service, "Caddy run"

d. My complete Caddy config:

{
	# General Options

	# TLS Options
	email hostmaster@guldager.one

	# Server Options
	servers {
	}
}

#Sites
guldager.one, www.guldager.one {
	encode gzip
	root * guldager/
	file_server {
		index index.html
	}
	log {
		output file logs/guldager.access.log
		format console {
			time_local
		}
	}
	handle_errors {
		rewrite * /error/{http.error.status_code}.html
		file_server
	}
}

5. Links to relevant resources:

2

The problem is that requests to images/CSS files are separate requests from the one that triggered the error.

So you either need to set up routing (outside of handle_errors) to serve those files (matching by request path for example), or you can inline all the assets to your error page (<style> tags for CSS, images as base64 data URIs, etc).

3

By routing do you mean create a seperat site and then redirect to that site when an error occurs?

4

You can use the handle directive to make mutually exclusive routes in the same site:

What you haven’t shown us is what the error HTML files look like – what kind of URLs does it craft for its related files? Does it use /error/ as a path prefix? If so then you can match requests to /error/* and handle those separately.

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.