Display image that returns HTTP 503 in Firefox

Question

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.

Answer 1

Since XMLHttpRequest can retrieve the output of any request, no matter the response code, it is possible to request for the image with XMLHttpRequest, and then convert the blob response type to a base64 format image, which can be loaded in the browser.

The CORS proxy I used in the sample code may not be necessary in the majority of cases, but could be useful in the case where the image you are trying to display has weird response headers that prevent access to the image from another domain.

Here is the sample code. It should work no matter the response code, CORS, etc.

var xhr = new XMLHttpRequest();

xhr.onload = function () {
    var reader = new FileReader();
    reader.onloadend = function () {
        // here, reader.result contains the base64-formatted string you can use to set the src attribute with
        document.getElementsByTagName('img')[0].src = reader.result; // sets the first <img> tag to display the image, change to the element you want to use
    };
    reader.readAsDataURL(xhr.response);
};

xhr.open('GET', "https://cors-anywhere.herokuapp.com/i.stack.imgur.com/8wB1j.png"); // don't include the HTTP/HTTPS protocol in the url
xhr.responseType = 'blob';
xhr.setRequestHeader('X-Requested-With', 'xhr');
xhr.send();

<img src="about:blank">

Everything works, as when you go into Inspect Element, you see that the src attribute of the <img> tag points to a base64 URL that can load in any browser.

Answer 2

You might want to compress or resize your images before uploading it to server , as they might be large enough to keep the server busy and show the error as most of the time, a 503 error occurs because the server is too busy. More over the image is SVG so it might render dimesions before completing, hence I'd suggest

• Try replacing the SVG with PNG or JPG
• Also try for site like https://tinypng.com/ to compress the image size

This might work for you