如何删除损坏的图像框？

Question

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

我也参考过

引用链接1:How to remove borders around broken images in webkit?

参考链接[2]：input type="image" shows unwanted border in Chrome and broken link in IE7

参考链接[3]：How to stop broken images showing

但无法找到任何正确的输出。 注意：我不能使用 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

我知道这是一个老问题，但我发现我今天（2020 年 1 月 8 日）也遇到了这个问题，并找到了解决它的方法。 我用最新版本的 Firefox 和 Chrome 进行了测试，我仍然找不到 Safari 的解决方案。

火狐： 对于Firefox，您必须添加alt=" "注意空格

Chrome： 对于 Chrome，它必须是 alt="" 注意空格

问题是，当我添加空间时，图标会在 Chrome 上显示而在 Firefox 上消失，反之亦然。

我只添加了一个空格，因为我不希望图像上出现任何文字。

我不必添加以下任何行来使其工作（我看到许多解决方案提出了其中的部分或全部），但我留下了它们以防万一

border: none;
outline: none;
border-image: none;

从那里我猜它会在 JavaScript 中检测浏览器并将 alt 属性更改为“”或“”。

Answer 2

document.addEventListener("DOMContentLoaded", function(event) {
    document.querySelectorAll('img').forEach(function(img){
        img.onerror =function(){this.parentNode.removeChild(this);
    })});

Answer 3

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

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

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

Answer 4

在您的邮件内容中使用此代码块来隐藏未渲染的图像。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<img id="imgctrl" src="imgs/sandeep11.png" onerror="$('#' + this.id).hide();" alt="Alternate Text" />

概念是.. 使用任何 CDN jquery 参考然后只有 jquery 代码可以工作。我猜你的 src 图像路径也应该是一些实时 url。如果没有的话，它应该在附件中。

请点击“显示远程内容”以获取远程网址 雷鸟。这是雷鸟的安全约束。这就是为什么 你的图片没有被加载。

Answer 5

DEMO

你可以通过javascript删除img：

arr = document.getElementsByTagName("img");
for(i=0; i<arr.length; i++){
    if(arr[i].src=="")
        arr[i].parentElement.removeChild(arr[i]);
}

Answer 6

不允许使用 ALT 文本听起来像是一个艰难的决定

如果做出此决定的人对一些样式有信心，您可以这样做，例如

<img src="logo.jpg" width="400" height=”149″ alt="Company Name" style="font-family: Georgia; color: #697c52; font-style: italic; font-size: 30px; background:#ccffcc">

见http://jsbin.com/IcIVubU/1/

Answer 7

我认为你可以在 img 上的错误事件上使用。

here is a simple solution

请注意此脚本使用 onDomReady 事件。在这种情况下，你应该写：

<script type="text/javascript">//<![CDATA[ 
    $(function(){
            $('img').on('error', function () {
            $(this).remove();
        })
     });//]]>  
</script>

更新

为什么要加载图片？您可以将此图片附加到电子邮件并通过CID显示它

Answer 8

您可以使用任何其他元素代替 IMG 并使用 CSS 设置 background-image。如果没有找到该图像，您将不会看到奇怪的框。

<span style="background-image:url('http://sampleimageurl.com/sampleimage.png'); display:inline-block; width:198px; height:55px">
     element with background
</span>

Answer 9

在此处使用alt 进行后备

demo

html

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

css

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

或者，如果您不想显示任何alt text，只需留一个空格即可。

demo here

HTML

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