如何删除损坏的图像框？

Question

我试图建立一个电子邮件模板，其中我必须向其他邮件客户端显示一些图像（例如，Outlook，Thunderbird ...）。现在的问题是，当这些客户端当时不允许显示图像时，破碎的图像框正在显示，而我不想显示。

我也曾提到

参考链接1：如何删除Webkit中损坏图像的边框？

引用的链接[2]：输入type =“ image”在Chrome中显示不需要的边框，在IE7中显示断开的链接

引用链接[3]：如何停止显示损坏的图像

但找不到任何适当的输出。注意：我不能使用div标签。我必须使用表格标签。

代码我在用什么：

<table style="background:#fff; width:600px; margin:auto auto;">
<tr>
    <td>
    <a href="http://www.sampleurl.com">
    <img src="http://sampleimageurl.com/sampleimage.png" height="55" width="198" />
    </a>
    </td>
    <td style="text-align:right;"><a href="http://www.sampleurl.com" target="_blank">
        <span style="font-family:Myriad Pro; color:#0d5497; font-size:20px;">www.sampleurl.com</span>
    </td>
</tr>

<!--<tr>
    <td colspan="2" style="height:1px; background: #0d5497;"></td>

</tr>-->

输出我得到的。

Answer 1

用于alt此处进行后备

演示

html

<img src="abc" alt="image" />

的CSS

img {
    width:200px;
    height:200px;
}

或者，如果您不想显示任何内容alt text，请给一个空格。

在这里演示

的HTML

<img src="abc" alt=" " />

Answer 2

我知道我迟到了，但我没有看到使用原生 javascript 的简单解决方案。这是我想出的解决方案

<img src="https://test.com/broken-image.gif" onerror="arguments[0].currentTarget.style.display='none'">

onerror 调用函数，将错误事件作为参数传递。因为参数实际上并未定义为“错误”，所以我们需要从所有函数都有的参数数组中获取它。一旦出现错误，我们就可以获取 currentTarget，我们的 img 标签，并将显示发送到 none。