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 badge on the page

The status message in the developer console:
The status message in the developer console

The badge itself:
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.
Add Comment
1 Answer(s)

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.

Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.