Custom offline.html page not showing images

2
We are trying to show a custom offline page when our application is down. I built the offline.html file and use a relative path to reference the three images we want to include. These three images are all saved within the error folder (same folder where offline.html lives). When I open it locally, the page looks fine but then when I commit and deploy the package and then stop the environment, the images are not showing.  I have included the html code below for reference. Does anyone know how to get the images to display in the custom offline page when the environment is down? <!doctype html> <html> <head> <style type="text/css"> body { background: url(background-image2.png) no-repeat center center fixed; background-size: cover; } div { display: flex; flex-direction: column; align-items: center; background: url(dust_scratches.png) no-repeat center center fixed; background-size: cover; border-radius: 15px; flex-grow: 3; width: 700px; min-width: 600px; box-shadow: 0 3px 6px (0 0 0 / 16%), 0 3px 6px (0 0 0 / 23%); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 25px; } figcaption { font-family: Arial; font-size: 20px; font-weight: bold; text-align: center; padding-top: 25px; } img { height: auto; width: 70%; max-width: 100%; } figure { text-align: center; } </style> </head> <body> <div> <figure> <img src="CTMS-Logo.png" alt="CTMS Logo"> <figcaption>The CTMS application is currently offline for maintenance. <br> Please check back later.</figcaption> </figure> </div> </body> </html>  
asked
4 answers
1

I also ran into this question where I was able to show an image in 404.html, but using the same setup would not display the image in offline.html when the app is down.

 

What you can do is turn the image into a base64 string and use it within the html directly like this:

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

 

answered
0

Have a look at this post. This is about using images from Sass but you may try something similar with your html file. Place images in the mentioned folders and provide its path.

https://forum.mendix.com/link/questions/104030

answered
0

It is possible to display images in custom error pages. Make sure the images are placed in the error_page folder.

 

And make sure that the img tag uses url like /error_page/image.jpg. For example:

<img src="/error_page/logo.svg">

 

See also: https://docs.mendix.com/howto/front-end/custom-error-page/

answered
0

For Css styling : <link rel="stylesheet" type="text/css" href="/error_page/offline.css">

for Images :<img src="/error_page/rds-toolbox-dark.svg" alt="503 Error">

You need to add path /error_page/ before css or images, This should fix it 

answered