javascript - 如何检测图像 URL 是否无效

Question

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

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

万一 URL 损坏，我想将 IMG 变量替换为本地默认图像的路径。

Answer 1

启用 JavaScript 的 CSS

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

或

j查询

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