html – 如何使用img元素的onerror属性

.posting-logo-div {  }
.posting-logo-img { height:120px; width:120px; }
.posting-photo-div { height:5px;width:5px;position:relative;top:-140px;left:648px; }
.posting-photo-img { height:240px; width:240px; }

HTML：

<div id="image" class="posting-logo-div"><img src="../images/some-logo1.jpg" onerror="this.src='../images/no-logo-120.jpg';" class="posting-logo-img"></div>
<div id="photo" class="posting-photo-div"><img src="../images/some-logo2.jpg" onerror="this.src='../images/no-logo-240.jpg';" class="posting-photo-img"></div>

这在Chrome或Mozilla中似乎不起作用,但在IE中可以使用.

<img src="invalid_link"
     onerror="this.onerror=null;this.src='http://img.558idc.com/uploadfile/allimg/210612/11035a154-5.jpg';"
>

现场演示：http://jsfiddle.net/oLqfxjoz/

正如Nikola在下面的评论中指出的,如果备份URL也无效,某些浏览器将再次触发“错误”事件,这将导致无限循环.我们可以通过this.onerror = null;简单地取消“错误”处理程序来防范这种情况.