img标签中onerror用法

`img`标签中的`onerror`事件是HTML中处理图像加载失败时的一种机制。当指定的图片源（`src`属性）无法成功加载，比如由于网络问题、图片不存在或者路径错误，`onerror`事件就会被触发。这个事件提供了一个在图片加载失败时执行自定义代码的机会。 在描述中提到的问题是，如果在`onerror`事件处理器中，我们简单地将图片源替换为另一个源，如`this.src='xxx.jpg'`，这可能导致一个无限循环。因为如果新的图片源同样无法加载，`onerror`事件会再次触发，进而再次尝试加载新图片，如此反复，浏览器，特别是基于微软核心的浏览器，如早期版本的Internet Explorer，可能会识别出这是一个潜在的死循环，并抛出“stack overflow”错误，即堆栈溢出。 为了避免这种情况，一种解决方案是使用两个`img`标签。第一个`img`标签用于尝试加载原始图片，并在`onerror`事件触发时将其设置为隐藏（`display: none;`）。同时，通过JavaScript改变第二个隐藏的`img`标签的类（`class`），使其变为可见。这样，即使第一个图片加载失败，第二个图片也会显示出来，而不会导致`onerror`事件的无限循环。 ```html <style type="text/css"> .hidden { display: none; } </style> <img src="xxx.jpg" onerror="this.className='hidden';xx.className=''" id="img1" /> <img src="yyy.jpg" class="hidden" id="img2" /> ``` 在这个例子中，`img1`是主图片，如果加载失败，`onerror`事件会让它隐藏，并显示`img2`。确保`img2`的源是可靠的，或者是一个备用的占位符图片，以防万一`img1`的替换策略也失败。 这种方法的一个关键点是，确保`onerror`事件处理函数不会再次触发`onerror`事件。通过改变CSS类而不是更改`src`属性，我们可以避免这个问题，因为更改CSS不会影响到图片的加载状态。 `onerror`事件是前端开发中处理图像加载异常的重要工具，但正确使用它需要考虑可能的错误处理场景，防止无限循环或不必要的错误状态。在处理`onerror`事件时，推荐的做法是提供备用图片、显示占位符或者给出错误提示，以保证用户体验的顺畅。