如何检测图像URL是否无效

Question

我遇到了一个javascript问题。我正在构建一个与MovieDB-API通信的网站，该网站有时会返回损坏的URL。

有没有办法检测API返回的URL是否会导致空页？也许通过追溯检查图像是否默认为“alt” - 属性？显然，由于显示了alt文本，程序“意识到”URL失败的事实。

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

Answer 1

您可以使用onerror事件检查网址，看看是否可以加载图片。

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;

没有任何发布的代码，它只是它如何工作的一般例子，

Answer 2

启用了javascript的CSS

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

OR

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

Answer 3

您可以尝试为每个图像执行Ajax请求。如果它确实存在，它将返回成功。否则会抛出错误，您可以将所需的图像放在这个位置。 jQuery Ajax片段：

$.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');
    }
});     

希望有所帮助