如何删除损坏的图像框？

Posted 2023-03-13

技术标签:

【中文标题】如何删除损坏的图像框？【英文标题】：How do i remove broken image box? 【发布时间】：2014-01-17 04:11:54 【问题描述】：

我正在尝试构建一个电子邮件模板，我必须在其中向不同的邮件客户端显示一些图像（例如.. 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"   />
    </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>-->

输出我得到的。

【问题讨论】：

【参考方案1】：

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

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

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

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

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

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

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

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

【讨论】：

【参考方案2】：

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

【讨论】：

虽然这段代码可以回答问题，但最好解释一下如何解决问题并提供代码作为示例或参考。仅代码的答案可能会令人困惑且缺乏上下文。【参考方案3】：

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

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

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

【讨论】：

【参考方案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();"  />

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

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

【讨论】：

【参考方案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]);

【讨论】：

这是什么？ o_O 您只需删除所有图像。 if(arr[i].src="") 这始终是正确的 :) 无论如何，图像总是带有 src，某些图像的 url 已损坏不要在电子邮件中使用 javascript。那是邪恶的。不，这只是一个简单的代码，删除具有空 src 属性的图像，再看 DEMO。 @RobAu 所以在发送之前使用它来创建模板。【参考方案6】：

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

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

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

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

【讨论】：

【参考方案7】：

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

here is a simple solution

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

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

更新

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

【讨论】：

jQuery 依赖于电子邮件模板？啊，这是用于电子邮件的..而不是忘记这个答案:) 好主意，当然标准 js 可能会起作用 - 但在某些客户端中执行 js 可能会出现问题 @Anand Mehta，你为什么要加载图片？您可以将此图像附加到电子邮件并通过 CID 显示出于安全原因，客户端通常会删除电子邮件中的 Javascript【参考方案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>

【讨论】：

我已经提到我无法使用 div 标签。我也尝试过。但我仅限于使用 div 标签删除了 div（虽然我不明白你为什么不能使用它）。您基本上可以使用任何元素并使用 CSS 正确设置样式。【参考方案9】：

在此处使用alt 进行后备

demo

html