图片加载失败后，怎样让那个图标不显示呢？

Question

图片加载失败后，怎样让那个图标不显示呢？
图片加载失败后，怎样让那个图标不显示呢？
图片加载失败后，怎样让那个图标不显示呢？

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

如果你想在图片加载失败时隐藏图标，你可以使用 CSS 来控制图片的显示状态。一种常见的方法是使用 CSS 的 onerror 事件处理器来隐藏加载失败的图像。下面是一个简单的例子：

假设你的 HTML 结构如下：

<img src="your-image-source.jpg" alt="Your Image" class="image-on-error">

你可以在 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 或其他技术来检查图片的可用性并做出相应的反应。