如何检测图像URL是否不起作用

我得到了一个javascript问题。我正在建立一个与MovieDB-API进行通信的网站，该网站有时会返回损坏的网址。如何检测图像URL是否不起作用

This screenshot pretty much explains it

有什么方法来检测由API返回的URL是否会导致一个空白页？也许通过追溯检查图像是否默认为“alt”属性？显然，由于alt-text显示，程序“意识到”URL失败的事实。

如果URL被破坏，我希望将IMG变量替换为本地默认图像的路径。

2014-04-22 user1531921

向我们展示你是如何获取的图片，请 – Chancho

CSS启用JavaScript

<img src="image.jpg" onerror="this.src='alternative.jpg';">

jQuery的

// Replace source 
$('img').error(function(){ 
     $(this).attr('src', 'missing.png'); 
}); 

// Or, hide them 
$("img").error(function(){ 
     $(this).hide(); 
});

编辑

$(document).ready(function() { 
    $('img').error(function() { 
     $(this).addClass('noImg'); 
    }); 
}); 

.noImg { 
    position: relative; 
    background: url() no-repeat center center; // or simple background color 
    height: 100px; 
    width: 100px; 
    content: "Your content"; 
    margin: 0 10px 10px 0; 
}

来源

2014-04-22 16:33:20 4dgaurav

由于一些代码！但是你知道还有什么方法可以显示电影的标题（我已经在一个变量中）显示missing.png-image的前面吗？ – user1531921

您可以使用onerror事件来检查URL并查看是否可以加载图像。

var url = 'http://www.somesite.com/image.jpg'; 

var img = new Image(); 

img.onerror = function() { 
    console.log('image could not be loaded, setting default placeholder'); 
    image_tag.src = '/my_default_placeholder.gif'; 
} 

img.src = url;

没有任何发布的代码，这是它如何工作只是一个普通的例子，

来源

2014-04-22 16:31:45 adeneo

你可以尝试做每一个图像的Ajax请求。如果它确实存在，它将返回成功。否则，它会抛出一个错误，你可以把所需的图像放在这个地方。 jQuery的阿贾克斯片段：

$.ajax({ 
    type: "GET", 
    url: url_to_img, 
    success: function(result) { 
     console.log("SUCCESS"); 
     $('#img-1234').attr('src', url); 
    }, 
    error: function(result) { 
     console.log("ERROR"); 
     // url broken 
     $('#img-1234').attr('src', '/img/noImg.png'); 
    } 
});

希望它可以帮助

来源

2014-04-22 16:40:32 gyss

谢谢！我采用了上述解决方案，但您的解决方案在未来可能非常有用。 – user1531921

如何检测图像URL是否不起作用

回答

相关问题