html - 如果无法加载图像，则静默隐藏图标

Question

在我正在处理的网站上，有一个菜单栏，其中包含几个选项，旁边有图标。这些图标纯粹是装饰性的，因此不需要替代文字。

不幸的是，图像有样式 - 设置的边距可以在 30 像素高的菜单栏中正确对齐它们。

这是按钮本身的代码(图标为 32x32 像素，但已调整为 16x16 像素):

<a class="button" href="#">
    <img src="images/crosshair.png" alt="">
    <span>Track and Trace</span>
</a>

CSS:

.button {
    display: block;
    padding: 3px 8px;
    background: #343434;
    text-decoration: none;
    color: #ececec;                     
    font-size: 0; // used by inline-block
}
.button img {
    display: inline-block;
    vertical-align: top; // needed to align the image properly; I couldn't find a better way.
    height: 16px;
    border: 0;
    font-size: 16px;
    margin: 4px 6px 4px 0;
}
.button span {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
}
.button:hover {
    background: #2E2E2E;
}

当图片没有加载时，这会因为边距而留下一个空间。

当图标无法加载时，其他人想要让图标完全消失时，他们会怎么做？

Answer 1

您可以使用“img”元素的“onerror”属性调用一个函数来设置 display: none 在外部“a”元素上。

参见 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img