如何使用 JavaScript 或 jQuery 替换损坏的图像？

用 jQuery/JavaScript 替换损坏的图像

损坏的图像会破坏网页的美观，给用户带来不完整或视觉上不吸引人的体验。幸运的是，jQuery 和 JavaScript 提供了工具来优雅地处理这个问题。

jQuery 方法

虽然人们最初可能会考虑使用 jQuery 来管理损坏的图像，但 JavaScript 提供了一种更简单的方法，更有效的解决方案。通过处理每个图像的 onError 事件，如果加载失败，您可以重新分配其源。

JavaScript 解决方案

下面的 JavaScript 代码片段捕获了 onError 事件一个图像元素，更新其 src 属性以显示占位符图像（例如， "noimage.gif")。

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

<img src="image.png" onerror="imgError(this);"/>

或者，您可以使用更简洁的语法，无需单独的 JavaScript 函数：

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

兼容性

下表列出了支持处理损坏错误的浏览器图片：

https://www.quirksmode.org/dom/events/error.html

以上是如何使用 JavaScript 或 jQuery 替换损坏的图像？的详细内容。更多信息请关注PHP中文网其他相关文章！