在 web 前端开发中，经常会遇到加载图片的场景。但是有时候，由于网络原因或者图片本身的问题，图片可能无法正常加载。为了增强用户体验并提高容错能力，我们可以使用onerror事件来处理图片加载失败的情况。
什么是 Image onerror 事件
onerror是一个事件属性，当一个<img>标签的图片加载失败时，就会触发这个事件。我们可以在图片加载失败时执行一些逻辑，比如替换为默认图片、显示错误信息等。
如何使用 Image onerror 事件
我们可以通过给<img>标签添加onerror事件来监听图片加载失败的情况。以下是一个简单的示例：
---- --------------- ---------------------------------
在这个示例中，当image.jpg加载失败时，会替换为default.jpg。这样就能保证页面上始终会显示一张图片，而不会出现空白的情况。
更复杂的处理逻辑
除了简单的替换图片外，我们还可以根据具体情况做更复杂的处理。比如，可以显示一个错误信息，或者隐藏整个<img>标签。
---- --------------- ------------------------
-- -------------- --------------- ------------- -- ---- ---------
--------
-------- ------------- -
-------------------------------------------------- - --------
------------------ - -------
-
---------在这个示例中，当图片加载失败时，会显示一个错误信息，并隐藏图片标签。
总结
通过使用onerror事件，我们可以更好地处理图片加载失败的情况，提升用户体验和页面容错能力。在实际开发中，根据具体需求和场景来选择合适的处理方式，让页面更加健壮和友好。