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); 

画像が完全に表示されます。しかし、画像が欠落している場合は、その壊れた画像ではないアイコンが表示されます。代わりに、プライマリイメージが見つからない場合（<img>で使用されているエラーと同様）、代わりのイメージ、たとえばhttp://myimages.com/abc.pngを表示したいとします。誰かが私にそのことを教えてもらえますか？

Answer 1

@AustinCから手がかりを得て、私は彼が提案したCheck if image exists on server using JavaScript?で与えられた解決策を少し修正しました。

私のイメージがamazon cloudでホストされているので、基本的に提案された機能は403（404の代わりに）を返していたので、リターンコード200（OK）をチェックすることにしました。ここに最終的な解決策があります。

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; 

}