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
Madeline Westman
1 answers
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.