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>-->

输出我得到的东西。 enter image description here

Answer 1

在此处使用alt作为后备补丁

demo

HTML

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

<强> CSS

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

或者，如果您不想展示任何alt text，只需留出空白。

demo here

<强> HTML

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

Answer 2

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

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

onerror调用函数，将错误事件作为参数传递。因为参数实际上并没有被定义为'error'，所以我们需要从所有函数都具有的arguments数组中获取它。一旦我们得到错误，我们就可以得到currentTarget，我们的img标签，并将显示器发送给none。

Answer 3

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

here is a simple solution

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

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

<强>更新

为什么要加载图片？您可以将此图片附加到电子邮件中，然后通过CID

进行展示

Answer 4

您可以使用任何其他元素而不是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 5

听起来很难被禁止使用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 6

在邮件内容中使用此代码块，将未呈现的图像保持为隐藏状态。

<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图像路径也应该是一些实时网址。如果没有，它应该是附件。

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

Answer 7

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

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

Chrome ：对于Chrome，它必须alt=""注意空白空间

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

我只添加了一个空格，因为我不想在图像上显示任何文本。

我不必添加以下任何行即可运行（我看到许多解决方案都提出了部分或全部建议），但我还是留给他们以防万一

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

我想从那里可以检测到JavaScript中的浏览器，并将alt属性更改为“”或“”。

Answer 8

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

Answer 9

<强> DEMO

您可以通过javascript删除img：

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

如何删除损坏的图像框？

9 个答案: