Jquery/javascript检查图像是否存在并更正它

下面给出3个图片url

（负载） （负载）

（不加载）

我需要一个javascript/jquery函数/代码来自动更改有效的扩展。以上面的例子为例将非常有帮助。以下是我的代码片段：

function imgError(image) {

image.onerror = "";
var image_src=image.src.substring(0, image.src.length-3);
image.src = image_src+"png";
$.ajax({
  type: "HEAD",
  url: image.src, //or your url
  success: function(data){
  },
  error: function(data){
      image.src = image_src+"JPG";
            $.ajax({
    type: "HEAD",
    url: image.src, //or your url
    success: function(data){
    },
    error: function(data){
        alert("image fails");

    },
      });
  },
});
return true;
}

HTML part
<img src="above url" onerror="imgError(this);">

函数imgError（图像）{
image.onerror=“”；
var image_src=image.src.substring（0，image.src.length-3）；
image.src=image\u src+“png”；
$.ajax({
类型：“头”，
url:image.src，//或您的url
成功：功能（数据）{
},
错误：函数（数据）{
image.src=image_src+“JPG”；
$.ajax({
类型：“头”，
url:image.src，//或您的url
成功：功能（数据）{
},
错误：函数（数据）{
警报（“图像故障”）；
},
});
},
});
返回true；
}
HTML部分

---

考虑图像src为vbarter.com/images/content/3/2/32822.jpg的情况。在内部ajax函数中，它进入错误部分并警告“image fails”。但是vbarter.com/images/content/3/2/32822.JPG是存在的。

事实上，您的代码是正确的，但问题是由于在JSFIDLE站点上使用ajax的跨域请求问题

我修改了您的JSFIDLE示例，将图像源更改为同一域下的图像。你会发现结果和你预期的一样

<div style="background-color:black;">
    <img src="http://fiddle.jshell.net/img/logo.jpg" onerror="imgError(this);" />
</div>

<script>
function imgError(image) {
    image.onerror = "";
    var image_src=image.src.substring(0, image.src.length-3);
    image.src = image_src+"jpg";
    $.ajax({
       type: "HEAD",
       url: image.src, //or your url
       success: function(data){
           alert("png sucess");
       },
       error: function(data){
           image.src = image_src+"png";
           .ajax({
               type: "HEAD",
               url: image.src, //or your url
               success: function(data){
                  alert("JPG success");
               },
               error: function(data){
                  alert("JPG fails");

               },
           });
      }
    });
    return true;
}
</script>

函数imgError（图像）{
image.onerror=“”；
var image_src=image.src.substring（0，image.src.length-3）；
image.src=image_src+“jpg”；
$.ajax({
类型：“头”，
url:image.src，//或您的url
成功：功能（数据）{
警惕（“png成功”）；
},
错误：函数（数据）{
image.src=image\u src+“png”；
.阿贾克斯({
类型：“头”，
url:image.src，//或您的url
成功：功能（数据）{
警报（“JPG成功”）；
},
错误：函数（数据）{
警报（“JPG故障”）；
},
});
}
});
返回true；
}

---

<> P/< P>你的代码有什么问题？考虑图像SRC的情况。在内部ajax函数中，它进入错误部分并警告“image fails”。但是存在。@mirzavu为什么要为Ajax调用费心，只需替换src并刷新图像在第一次替换（jpg->png）之后，它就不起作用了。然后我换成了JPG，它很管用。但我想确保它能正常工作。如果我想更改为gif，如果它没有加载呢。