JQuery - 检查 IMG 的 src 是否有效

Question

是否可以使用jQuery检查img src是否有效？

我们有一个包含数百篇新闻文章的动态网站，其中大部分都包含图片。基本上，由于后端错误，即使当前没有图像，图像div也会显示出来，这给我们带来了一些问题。

  <div class="imgBlock">
      <img class="newsImg" src="db/imgart/10234.jpg" />
  </div>

是否可以通过JQuery脚本检测img src是否传递了图像？

- Dancer

---

你应该在整个页面加载完成后，在文档末尾执行这个检查。 - Karan

请查看以下链接： https://dev59.com/-HA75IYBdhLWcg3wSm24 - devseo

Answer 1

function IsValidImageUrl(url) {
$("<img>", {
    src: url,
    error: function() { alert(url + ': ' + false); },
    load: function() { alert(url + ': ' + true); }
});
}

- Rahul G Nair

Answer 2

像这样使用错误处理程序：

$(".newsImg").error(function() {
  alert("No image");
});

或者

var image = new Image(); 
image.src = "db/imgart/10234.jpg";
if (image.width == 0) {
  alert("No image");
}

- ptCoder

Answer 3

使用简单的CSS：

    <style type="text/css">
    .hidden {
    display: none;
    {
     .visible {
            display: block;
     }
    </style>

然后脚本

var imgDiv = document.getElementById('img1'); //your div id
    var imgsrc = "db/imgart/10234.jpg"; //or document.getElementById(img1).getElementsByTagName('img');

    var img = new Image();

    img.onerror = function (evt){
    alert(this.src + " can't be loaded.");
    //hide <div>
    imgDiv.setAttribute('class', 'hidden');

    }
    img.onload = function (evt){
    alert(this.src + " is loaded.");
    //show div
    imgDiv.setAttribute('class', 'visible');
    }

    img.src = imgsrc;

- ares777