如何在所有浏览器中使用 onerror 属性处理图像加载错误？

使用 onerror 属性处理图像加载错误

将图像合并到 Web 应用程序中通常需要处理潜在的加载失败。 onerror 属性提供了一个方便的解决方案来优雅地处理此类错误。

Background

如给定的 HTML 代码中所述，onerror 属性设置当图像加载过程遇到错误时执行脚本的事件侦听器。但是，正如查询中提到的，这种方法在某些浏览器（例如 Chrome 和 Mozilla）中可能会失败。

解决方案

为了确保跨浏览器的兼容性，请考虑使用以下内容语法：

<code class="html"><img src="invalid_link" onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"></code>

如果主图像加载失败，此代码将提供备用后备图像。为了防止备份 URL 也无效时出现无限循环，代码使用“this.onerror=null;”使错误处理程序无效。

现场演示

An以下链接提供了此解决方案的交互式演示：

• http://jsfiddle.net/oLqfxjoz/

其他注意事项

如解决方案中所述，使用此方法可确保 Chrome 和 Mozilla 中的兼容性。不过，需要注意的是，不同浏览器环境对图像加载错误的处理可能会有所不同。

以上是如何在所有浏览器中使用 onerror 属性处理图像加载错误？的详细内容。更多信息请关注PHP中文网其他相关文章！