如何用新图像替换onrror src图像

Question

出于某种原因，我的photo.onerror图片没有加载，因为我在图片中选择了一个没有设置的图片，错误的图片仍然无法加载，看到有什么问题吗？

  if (document.getElementById("draft_player_photo")) {
     var photo = document.getElementById("draft_player_photo");
     photo.src = "http://www.myfantasyleague.com/player_photos_2013/" + pid + "_thumb.jpg";
     photo.alt = playerDatabase['pid_' + pid].name;
     photo.title = playerDatabase['pid_' + pid].name;
     photo.onerror = "this.onerror=null;this.src='http://www.myfantasyleague.com/player_photos_2010/no_photo_available.jpg';";
  }

Answer 1

您需要将photo.onerror定义为函数，因为您现在只需将字符串指定给onerror：

..
photo.onerror = function() {
    this.src=this.getAttribute('fallback') //reuse of my original idea, but whatever works
}   
...

演示 - ＆gt;的 http://jsfiddle.net/zpLm0e7d/

我会实施一个后备src：

<img id="draft_player_photo" fallback="http://www.w3schools.com/images/colorpicker.gif"src="http://www.myfantasyleague.com/player_photos_2013/11657_thumb.jpg" alt="this image">

然后抓住任何onerror并将src设置为该回退值：

$('img').on('error', function() {
  $(this).attr('src', $(this).attr('fallback'))
});   

演示 - ＆gt;的 http://jsfiddle.net/4p8gdppL/

对于w3fools参考，他们的图像长度很短。