如何停止显示损坏的图像答案

【问题标题】：How to stop broken images showing如何停止显示损坏的图像
【发布时间】：2011-10-01 03:06:48
【问题描述】：

我有一张桌子，里面有一些图像，我想开始时没有图像。我已经设置了 src=""。但是在浏览器中查看时，它会显示损坏的图像图片。

<tr>
<td><img src=""> </td>
<td><img src=""> </td>
<td><img src=""></td>
</tr>

在我输入一些数据之前，如何防止浏览器显示损坏的图片或 X 或其他内容进入 src 属性。

【问题讨论】：

标签： jquery html css

【解决方案1】：

不要把那些img 元素放在那里。它们没有语义价值。另外，您应该阅读这篇文章：Empty image src can destroy your site on NCZOnline

我猜你还是在用 Javascript 更改图像源。如果单元格中还没有img，您只需在单元格中添加一个img（参见MDC appendChild() page 中的示例）。

（另一种更丑陋的解决方案是默认隐藏图像 (style="display: none;")，并且只有在获得 src 时才使用 Javascript 显示它们。但你应该做第一个。）

【讨论】：

【解决方案2】：

不要使用指向任何东西的图像。

您可以将它们设置为不可见（如果您在 src 属性中有 anything 将不起作用，即使它是错误的 URL）：

img[src=''] 
{
  display: none;
}

但正如我已经说过的，如果您没有显示图像，请不要将标签放在页面上。

【讨论】：

【解决方案3】：

不要把它们放在那里。稍后用$('someelement').append("image");插入它们

【讨论】：

【解决方案4】：

src 属性是指向图像所必需的；如果您没有图片，请不要使用img 元素。

如果需要，您可以使用任何其他元素并设置 background-image 属性。

【讨论】：

【解决方案5】：

我建议最初使用 CSS 来隐藏图像标签：

<img src="" style="visibility: hidden;">

然后在您添加图片 URL 时从您的 JavaScript 中修改：

yourImgObject.src = 'IMAGEURL';
yourImgObject.style.visibility = 'visible'

【讨论】：

【解决方案6】：

试试这个：

<img src="http://someurl.com" width='0' height='0'>

您为什么要这样做？我正在使用不可见的图像来跟踪用户——它会点击那个 url，它实际上不是图像并且不会返回一个图像，并记录发出请求的用户。我在没有客户端脚本（html 电子邮件和 Google 站点）的环境中执行此操作，这是最简单的方法。

【讨论】：

【解决方案7】：

非常简单的答案是添加空值的 alt 属性

<img src="" alt="" width="50" height="50"/>

宽度和高度是可选的

【讨论】：

简单、无 CSS、无 Javascript、跨浏览器的工作解决方法。谢谢。

【解决方案8】：

添加此内联事件处理程序，

<img src="broken.png" onerror="this.style.display='none'" />

【讨论】：

添加 alt="" 作为后备可能是一个好主意，以防万一用户没有启用 JS。

【解决方案9】：

这并不是您问题的真正答案，而是为了完整起见：可以在加载错误时删除图像（例如使用内联脚本）。

<img src="broken.png" onerror="this.parentNode.removeChild(this)">

【讨论】：

【解决方案10】：

真正帮助我的伟大解决方案

img {  
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:after {  
  content: attr(alt);
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

来自https://bitsofco.de/styling-broken-images/的想法

【讨论】：

【解决方案11】：

如果您使用的是Semantic UI React，则可以通过事件的target 属性将img 元素传递给onError：

<Image src={imageObject.Url} onError={i => i.target.src=''} />

【讨论】：

【解决方案12】：

如果您只是想摆脱损坏的图像图标并且不想隐藏图像并希望保持其分辨率不变；使用透明的 base-64 图像，替换它。

Jquery：

$("img").on("error", function() {
    $(this).attr('src' ,'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
});

优点：

无需隐藏图片
无需更改图片的 Alt 文本
base-64 图像没有特定的高宽
适用于 jquery 缩放 (jquery.zoom.js)，如果缩放的图像损坏

【讨论】：