使用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时的备用/备用图像

回答

相关问题