以下回复参考:皆我百晓生、券券喵儿等免费微信小程序作答:
如果你想在图片加载失败时隐藏图标,你可以使用 CSS 来控制图片的显示状态。一种常见的方法是使用 CSS 的 onerror 事件处理器来隐藏加载失败的图像。下面是一个简单的例子:
假设你的 HTML 结构如下:
你可以在 CSS 中为这个特定的类设置样式:
.image-on-error {
/* 你的常规图片样式 */
display: block; /* 图片正常加载时的显示状态 */
}
然后在 JavaScript 中添加事件监听器来处理图片加载失败的情况:
document.querySelectorAll('img').forEach(function(img) {
img.onerror = function() {
// 当图片加载失败时,更改图片样式使其不显示
this.classList.add('image-not-loaded'); // 这是新的类名,可以在你的CSS样式表中设置该类的显示方式。
};
});
然后在你的 CSS 中添加一个新的类来隐藏加载失败的图像:
.image-not-loaded {
display: none !important; /* 图像加载失败时不显示 */
}
这种方法使用了 JavaScript 和 CSS 的结合来实现图片的加载状态控制。注意这个方法只能应用于当前已经加载在页面的图片上,如果图片尚未加载就出现问题(例如网络问题),那么这个方法可能无法生效。在这种情况下,你可能需要更复杂的解决方案,例如使用 AJAX 或其他技术来检查图片的可用性并做出相应的反应。