检查图像是否损坏

Question

检查图像是否损坏，如何检查图像是否在指定位置可用？

当给定的图像可用时，只有我必须显示图像，否则不显示。

例如 ：

1）下图不破

<img width="56" height="56" alt="801 - 2 Bedroom Cabin" src="https://s3.amazonaws.com/highlandscondos/7/801 Bath 2.jpg" class="rsTmb">

2）以下图像被破坏

<img width="56" height="56" alt="801 - 2 Bedroom Cabin" src="https://s3.amazonaws.com/highlandscondos/7/801 LR 2.jpg" class="rsTmb">

在以上两种情况下它显示如

我不想显示破碎的图像。

提前致谢..！！

Answer 1

迟到的答案，但你可以尝试什么是described at CSS-Tricks。但是，有些人在评论中说，它在IE中不起作用。

// Replace source
$('img').error(function(){
        $(this).attr('src', 'https://i.imgur.com/YnsUsfk.png#nopictureavailable.png');
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img width="56" height="56" alt="801 - 2 Bedroom Cabin" src="https://i.imgur.com/FQFzBJh.png" class="rsTmb">
<img width="56" height="56" alt="801 - 2 Bedroom Cabin" src="https://example.com/404" class="rsTmb">