什么是 Image onerror 事件
onerror是一个事件属性，当一个<img>标签的图片加载失败时，就会触发这个事件。我们可以在图片加载失败时执行一些逻辑，比如替换为默认图片、显示错误信息等。
如何使用 Image onerror 事件
我们可以通过给<img>标签添加onerror事件来监听图片加载失败的情况。以下是一个简单的示例：
<img src="image.jpg" onerror="this.src='default.jpg'">
在这个示例中，当image.jpg加载失败时，会替换为default.jpg。这样就能保证页面上始终会显示一张图片，而不会出现空白的情况。
更复杂的处理逻辑
除了简单的替换图片外，我们还可以根据具体情况做更复杂的处理。比如，可以显示一个错误信息，或者隐藏整个<img>标签。
// www.javascriptcn.com code example
<img src="image.jpg" onerror="handleError()">
<p id="error-msg" style="display: none;">Failed to load image</p>
<script>
function handleError() {
document.getElementById('error-msg').style.display = 'block';
this.style.display = 'none';
}
</script>在这个示例中，当图片加载失败时，会显示一个错误信息，并隐藏图片标签。
总结
通过使用onerror事件，我们可以更好地处理图片加载失败的情况，提升用户体验和页面容错能力。在实际开发中，根据具体需求和场景来选择合适的处理方式，让页面更加健壮和友好。