使用Snap SVG時的備用/備用圖像

我剛剛下載了Snap SVG，我試圖弄清楚如何顯示一個圖像與回落安排。這裏是代碼：使用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，如果主圖像未找到（類似於使用<img>的錯誤）。有人可以請指導我如何做到這一點。

來源

2016-10-13 Anjum

您想要檢查以確保圖像存在，然後僅在存在圖像時才顯示它。看到這裏：http://stackoverflow.com/questions/18837735/check-if-image-exists-on-server-using-javascript - 檢查圖像，然後將你的g.image語句包裝在if語句中並顯示如果沒有找到第一個替換圖像。 – AustinC

謝謝@AustimC。確實有幫助。 – Anjum

從@AustinC處接受提示我稍微修改了Check if image exists on server using 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; 

}

來源

2016-10-13 16:28:40 Anjum

使用Snap SVG時的備用/備用圖像

回答

相關問題