js控制<img>显示

Question

有这样一段html：

<div>
    <img src='../images/001.jpg'/>
    <img src='../images/002.jpg'/>
    <img src='../images/003.jpg'/>
    <img src='../images/004.jpg'/>
</div>

默认情况下，如果某张图片不存在，浏览器会有一个图片不存在的占位icon。
我想如果某张图不存在，直接不显示相应的<img>标签。

问题：
用js实现，应该怎么做呢？

Answer 1

监听 img 的 onerror 事件即可：

<img src='../images/001.jpg' onerror="this.style.display='none'"/>

或：

var imgList = document.getElementsByTagName('img');
for (var i = 0, len = imgList.length; i < len; i ++) {
  imgList[i].addEventListener('error', function(e) { 
    this.style.display = 'none';
  }, false);
}

具体代码结合自己业务需要来写。

Answer 2

<img src="../images/001.jpg" onerror="javascript:this.style.display='none'">