Display image that returns HTTP 503 in Firefox

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

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.