如何使用 JavaScript、jQuery 或 CSS 隐藏损坏的图像图标？

使用 JavaScript/jQuery/CSS 静默隐藏“未找到图像”图标

当渲染的 HTML 页面中缺少图像时，默认值“找不到图像”图标可能会分散用户的注意力并破坏用户体验。幸运的是，有多种方法可以使用各种技术来隐藏此图标。

JavaScript/jQuery

最简单的方法涉及使用 onerror 事件处理程序。当图像加载失败时，会触发 onerror 事件，允许您执行自定义操作。其中一个操作是隐藏图像：

<img  src="/static/imghwm/default1.png" data-src="path/to/image.png" class="lazy" onerror="this.style.display = 'none';" alt="如何使用 JavaScript、jQuery 或 CSS 隐藏损坏的图像图标？" >

CSS

CSS 通过为无法加载的图像定义特定样式，提供了一种更直接的方法。使用 display 属性，您可以将图像的可见性设置为隐藏：

img.hide-if-failed {
    display: none;
}

然后，将此类分配给图像：

<img  class="hide-if-failed lazy" src="/static/imghwm/default1.png" data-src="path/to/image.png" alt="如何使用 JavaScript、jQuery 或 CSS 隐藏损坏的图像图标？" >

使用 JavaScript/jQuery隐藏其他元素

如果“找不到图像”图标包含在另一个元素（例如 div）中，您可以使用 JavaScript 或 jQuery 在图像加载失败时隐藏父元素：

$('img').on('error', function() {
  $(this).parent().hide();
});

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