Question

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

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

这是按钮本身的代码（图标为32x32px，但调整为16x16px）：

.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;
}

CSS：

<Ship>
    <Name>Base Ship</Name>
    <Owner>PG</Owner>
    <Aim>
        <Type>base</Type>
        <Value>10</Value>
        <Last>-1</Last>
    </Aim>
    <Aim>
        <Type>cannon</Type>
        <Value>10</Value>
        <Last>2</Last>
    </Aim>
    <Dodge>
        <Type>base</Type>
        <Value>10</Value>
        <Last>-1</Last>
    </Dodge>
    <EmPower>
        <Type>base</Type>
        <Value>10</Value>
        <Last>-1</Last>
    </EmPower>
</Ship>

当图像未加载时，由于边距，这会产生留空空间的效果。

当其他人想要有一个图标时，完全如果无法加载，会怎么做？

Answer 1

你可以利用＆＃34; onerror＆＃34; ＆＃34; img＆＃34;的属性元素调用一个函数，在外部＆＃34; a＆＃34;上设置display：none;元件。

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

如果无法加载图像，请静默隐藏图标

1 个答案: