使用JQuery/JavaScript检查图像是否存在并纠正它

Question

给出以下3个图片链接：

http://www.vbarter.com/images/content/3/2/32822.JPG（已加载） http://www.vbarter.com/images/content/3/2/32784.png（已加载）

http://www.bikewalls.com/pictures/abc.jpg（未加载）

我需要一个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);">

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

- Mirza Vu

---

你的代码有什么问题？ - Fabrizio Calderan

考虑图像源为 http://www.vbarter.com/images/content/3/2/32822.jpg 的情况。在内部 ajax 函数中，它进入错误部分并警告“图像失败”。但是 http://www.vbarter.com/images/content/3/2/32822.JPG 存在。 - Mirza Vu

@mirzavu 为什么还要费心进行Ajax调用呢？只需替换src并刷新图片即可。 - Vinay Pratap Singh Bhadauria

第一次替换（jpg->png）后，它不起作用。然后我改成了JPG，它就可以工作了。但我想确保它能够正常工作。如果我想要更改为gif，那么如果它无法加载怎么办？ - Mirza Vu

http://jsfiddle.net/mirzavu/ceN8R/4/ - Mirza Vu

Answer 1

实际上，您的代码是正确的，但问题是由于在jsfiddle网站上使用ajax时出现了跨域请求问题。

我修改了您的jsfiddle示例，将图像源更改为位于同一域下的图像。您会发现结果与您预期的相同。

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

http://jsfiddle.net/ceN8R/6/

- Katrin