Question

我有一张桌子，上面有一些我想要开始但没有图片的图片。我设置了src =“”。但是当在浏览器中查看时，它显示了破碎的图像。

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

在放入一些数据之前，如何防止浏览器显示损坏的图像pics或X等等进入src属性。

Answer 1

添加此内联事件处理程序

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

Answer 2

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

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

宽度和宽度高度是可选的

Answer 3

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

我猜你无论如何都要使用Javascript更改图像源。如果还没有img，您应该在单元格中添加style="display: none;"（请参阅MDC appendChild() page中的示例）。

（另一个更丑陋的解决方案是默认隐藏图片（src），只有当他们得到{{1}}时才用Javascript显示它们。但是你应该做第一个。{ ）

Answer 4

请勿使用无效的图像。

你可以设置它们的样式，使其无法显示（如果src属性中有任何，则无效，即使它是一个错误的URL）：

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

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

Answer 5

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

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

Answer 6

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

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/的想法

Answer 7

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

插入它们

Answer 8

src属性需要指向图像;如果没有图像，请不要使用img元素。

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

Answer 9

我建议最初使用CSS隐藏图片代码：

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

然后在添加图片网址时从JavaScript修改：

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

Answer 10

试试这个：

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

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

Answer 11

如果您正在使用Semantic UI React，则可以通过活动的<form id="#registerformmodal" class="right user_delete" method="POST" userid="{{user.id}}"> ... </form>媒体将img元素传递给onError：

target

Answer 12

如果您只想摆脱残破的图像图标，又不想隐藏图像并希望保持其分辨率不变，使用透明的 base-64映像来替换它。

jquery：

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

优点：

无需隐藏图像
无需更改图片的替代文本
base-64图像没有特定的高度-宽度
如果缩放的图像损坏，则可与jquery缩放（jquery.zoom.js）配合使用

如何阻止破碎的图像显示

12 个答案: