Display image that returns HTTP 503 in Firefox
I have a status badge image that returns the HTTP code 503 when the respective service is offline (but the webserver is still there serving calls). Now opening the image URL directly will display the image properly, regardless of the underlying 503 error code. But using it inside an <img> tag shows the broken image icon. How can I prevent that while still allowing the image itself to return a 503? (External services depend on that)
Here are some screenshots to illustrate what’s going on:
The badge on the page:
The status message in the developer console:
The badge itself:
Note: This happens on Firefox. Not Chrome
Edit: Here are a few requested pieces information:
- Firefox 78.0.2 (64-Bit)
- It’s served from the same domain. But the domain is essentially just proxying serveral underlying webservices. And this badge is originating from a different service but all on the same domain.
- It’s a SVG image if that makes any difference.
Try this: https://medium.com/@tbarrasso/on-the-broken-image-icon-9d8cd3eb990f. Pretty much, it is very hard to hide it, so you have to have some logic to detect when it cannot be loaded, and then do something about it.
