Альтернативное / резервное изображение при использовании Snap SVG

Question

Я только что скачал Snap SVG, и я пытаюсь выяснить, как отобразить изображение с резервным расположением. Вот код:

var s = Snap("#MyPopup");
var g = s.g();
var image = g.image("http://myimages.com/xyz.png", 250, 10, 40,40 );

Это отображает изображение отлично. Тем не менее, если изображение отсутствует, вы получите этот значок с изображением разорванного изображения. Вместо этого я хочу отобразить альтернативное изображение, скажем, http://myimages.com/abc.png, если основное изображение не найдено (аналогично onerror, используемому с <img>). Может кто-нибудь, пожалуйста, подскажите мне, как это сделать.

Answer 1

Пользуясь репликой @AustinC, я немного изменил решение, приведенное в разделе Проверка наличия изображения на сервере с использованием JavaScript? что он предложил.

По сути, предлагаемая функция возвращала 403 (вместо 404), поскольку мои изображения размещались в облаке амазонок, поэтому я решил проверить код возврата 200 (ОК). Вот окончательное решение.

var s = Snap("#MyPopup");
var image = null;
var mImagePath = "https://myimages.com/xyz.png";

if ( imageExists (mImagePath) == true ) {
    image = s.image(mImagePath, 250, 10, 40,40 );                   
} else {
    image = s.image("https://myimages.com/ImageNotFound.png", 250, 10, 40,40 );
}


function imageExists(image_url){

    var http = new XMLHttpRequest();

    http.open('HEAD', image_url, false);
    http.send();

    return http.status == 200;

}