Question

如何隐藏损坏的图像图标？示例： Example

我的图片有错误src：

<img src="Error.src"/>

解决方案必须适用于所有浏览器。

仅使用CSS或HTML，而不是JS。

Answer 1

CSS / HTML无法知道图像是否已断开链接，因此无论如何都必须使用JavaScript

但这是隐藏图像或用备份替换源的最小方法。

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

或

<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>

更新

您可以通过执行以下操作立即将此逻辑应用于多个图像：

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

<img src="error.src">
<img src="error.src">
<img src="error.src">
<img src="error.src">

更新2

对于 CSS选项，请参阅下面的michalzuber's answer。您无法隐藏整个图像，但可以更改损坏图标的外观。

Answer 2

尽管人们在这里说的是什么，但你根本不需要JavaScript，你甚至不需要CSS !!

它实际上非常简单，仅使用HTML。 如果图片无法加载，您甚至可以显示默认图片。以下是......

这也适用于所有浏览器，甚至可以追溯到IE8（2015年9月我托管的网站中有超过250,000名访问者， ZERO 人们使用比IE8更糟糕的东西，这意味着此解决方案适用于字面意思）。

第1步：将图片引用为对象，而不是 img 。当物体失效时，它们不会显示破损的图标;他们什么都不做。从IE8开始，您可以互换使用Object和Img标签。您可以使用常规图像调整大小并完成所有可以获得的光彩。不要害怕对象标签;它只是一个标签，没有任何大而笨重的装载，它不会减慢任何速度。您只是使用另一个名称的img标签。速度测试显示它们的使用方式相同。

第2步：（可选，但很棒）在该对象中粘贴默认图像。如果您想要的图像实际上在对象中加载，则默认图像不会显示。例如，您可以显示用户头像的列表，如果有人在服务器上没有图像，则可以显示占位符图像...根本不需要javascript或CSS，但是您可以获得这些功能什么需要大多数人的JavaScript。

这是代码......

<object data="avatar.jpg" type="image/jpg"> <img src="default.jpg" /> </object>

......是的，就这么简单。

如果你想用CSS实现默认图像，你可以在HTML中使它更简单......

<object class="avatar" data="user21.jpg" type="image/jpg"></object>

...只需添加此答案中的CSS - ＆gt; https://stackoverflow.com/a/32928240/3196360

Answer 3

在https://bitsofco.de/styling-broken-images/

找到了一个很棒的解决方案

＆＃13;

img {  
  position: relative;
}

/* style this to fit your needs */
/* and remove [alt] to apply to all images*/
img[alt]:after {  
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;
  content: attr(alt);
}

＆＃13;

<img src="error">
<br>
<img src="broken" alt="A broken image">
<br>
<img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">

＆＃13;

Answer 4

我认为最简单的方法是通过text-indent属性隐藏损坏的图像图标。

img {
    text-indent: -10000px
}

如果你想看到“alt”属性，显然它不起作用。

Answer 5

我喜欢answer Nick并正在玩这个解决方案。找到一种更干净的方法因为::之前/ ::之后的伪是对img和object这样的替换元素不起作用，所以只有在没有加载对象数据（src）的情况下它们才能工作。它使HTML更加干净，只有在对象无法加载时才会添加伪。

http://codepen.io/anon/pen/xwqJKQ

<object data="http://lorempixel.com/200/200/people/1" type="image/png"></object>

<object data="http://broken.img/url" type="image/png"></object>

object {
  position: relative;
  float: left;
  display: block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  border: 1px solid black;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background: red url('http://placehold.it/200x200');
  }
}

Answer 6

如果您希望将图像保留/需要作为占位符，则可以使用onerror和一些css将不透明度更改为0以设置图像大小。这样您就不会看到断开的链接，但页面会正常加载。

<img src="<your-image-link->" onerror="this.style.opacity='0'" />

.img {
    width: 75px;
    height: 100px;
}

Answer 7

仅使用CSS很难，但您可以使用CSS的background-image代替<img>代码......

这样的事情：

HTML

<div id="image"></div>

CSS

#image {
    background-image: url(Error.src);
    width: //width of image;
    height: //height of image;

}

这是一个有效的fiddle。

注意：我在小提琴的CSS中添加了边框，只是为了演示图像的位置。

Answer 8

如果你需要让图像容器可见，因为它稍后会被填充，并且不想再显示和隐藏它，你可以在src中粘贴1x1透明图像：

<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

我将此用于此目的。我有一个图像容器，它将通过Ajax将图像加载到其中。因为图像很大并需要加载，所以需要在Gif加载栏的CSS中设置背景图像。

但是，因为src是空的，破坏的图像图标仍然出现在使用它的浏览器中。

设置透明的1x1 Gif可以简单有效地修复此问题，无需通过CSS或JavaScript添加代码。

Answer 9

如果您要添加带有文本 alt =“ abc” 的alt，它将显示显示损坏的缩略图，以及alt消息abc

<img src="pic_trulli.jpg" alt="abc"/>

如果您不添加Alt键，则会显示显示损坏的缩略图

<img src="pic_trulli.jpg"/>

如果要隐藏损坏的一个只需添加 alt =“” ，它将不会显示损坏的缩略图和任何替代消息（不使用js）

<img src="pic_trulli.jpg" alt=""/>

如果要隐藏损坏的一个只需添加 alt =“”＆onerror =“ this.style.display ='none'” ，它就不会显示损坏的缩略图和任何alt消息（带有js）

<img src="pic_trulli.jpg" alt="abc" onerror="this.style.display='none'"/>

第4个有点危险（不完全是），如果您想在onerror事件中添加任何图像，则即使Image作为style.display存在，它也不会显示。因此，在不需要显示其他图像时使用它。

display: 'none'; // in css

如果我们在CSS中提供它，则该项目将不会显示（如image，iframe，div之类的）。

如果要显示图像，并且如果出错则要显示完全空白，则可以使用，但也要注意不要占用任何空间。因此，您需要将其保存在div中

链接https://jsfiddle.net/02d9yshw/

Answer 10

使用object标签。在标签之间添加替代文字，如下所示：

<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>

with the standard library

Answer 11

缺少的图像要么只显示任何内容，要么显示[？ ]样式框，当他们的源无法找到。相反，您可能希望将其替换为＆＃34;缺少图像＆＃34;你确定存在的图形存在，因此有更好的视觉反馈表明存在问题。或者，您可能想要完全隐藏它。这是可能的，因为浏览器无法发现＆＃34;错误＆＃34;我们可以关注的JavaScript事件。

    //Replace source
    $('img').error(function(){
            $(this).attr('src', 'missing.png');
    });

   //Or, hide them
   $("img").error(function(){
           $(this).hide();
   });

此外，您可能希望触发某种Ajax操作，以便在发生这种情况时向网站管理员发送电子邮件。

Answer 12

您可以将此路径作为css解决方案

img {
        width:200px;
        height:200px;
        position:relative
   }
img:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: inherit;
        height: inherit;
        background: #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder') no-repeat center;
        color: transparent;
    }

<img src="gdfgd.jpg">

Answer 13

自2005起，诸如Firefox之类的Mozilla浏览器就支持非标准:-moz-broken CSS伪类，该伪类可以完全满足此请求：

td {
  min-width:64px; /* for display purposes so you can see the empty cell */
}

img[alt]:-moz-broken {
  display:none;
}

<table border="1"><tr><td>
  <img src="error">
</td><td>
  <img src="broken" alt="A broken image">
</td><td>
  <img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png"
       alt="A bird" style="width: 120px">
</td></tr></table>

img[alt]::before也可以在Firefox 64中使用（尽管曾经是img[alt]::after，所以这是不可靠的）。我无法在Chrome 71中使用任何一种。

Answer 14

img::after的技巧很不错，但至少有2个缺点：

并非所有浏览器都支持（例如，不适用于Edge https://codepen.io/dsheiko/pen/VgYErm）
您不能简单地隐藏图像，而是将其覆盖-因此，当您要显示案件中的默认图像时，这无济于事

我不知道没有JavaScript的通用解决方案，但是对于Firefox，只有一个不错的解决方案：

img:-moz-broken{
  opacity: 0;
}

Answer 15

React中其他人描述的相同想法如下：

description

Answer 16

编辑：实际上并没有解决所提出的问题，但可能仍然有用。

这就是我对 SASS/SCSS 所做的。我有包含此 mixin 的实用程序 scss 文件：

  @mixin fallback() {
    background-image: url('/assets/imgs/fallback.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
  }

它在.scss中的用法

img {
  // ...
  @include fallback();
}

Answer 17

您可以使用 before 和 after 作为样式来防止损坏的图像。

<img src="Error.src">

img:befor{
  contetn: url("image.jpg");
}

img:after{
  content: "(url: " attr(src) ")";
}

在这种情况下，如果src中的图片损坏将使用before内容，如果没有错误则使用src。

Answer 18

对于未来的googlers，2016年有一种浏览器安全的纯CSS方式，使用属性选择器隐藏空图像：

img[src="Error.src"] {
    display: none;
}

Answer 19

在没有任何代码的情况下执行此操作的基本且非常简单的方法是仅提供空的alt语句。然后，浏览器将图像作为空白返回。它看起来就像图像不存在一样。

示例：

<img class="img_gal" alt="" src="awesome.jpg">

试试看！ ;)

如何使用CSS / HTML（不带js）隐藏图像损坏的图标

19 个答案:

更新

更新2