在使用CSS加载或破坏图像源时操纵图像占位符

在加载图像之前，它会显示一个带边框的图像占位符，该占位符无法删除。所以我想隐藏或替换默认的图像占位符

我想要的是一个避免Javascript代码的CSS专用解决方案

我当前的CSS如下所示：

img {
    width: 50px;
    height: 50px;
    border: 1px solid #f4f4f4;
    border-radius: 25px;

    -webkit-background-clip: border-box;
    -moz-background-clip: border-box;
    background-clip: border-box;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

在这里，第一个图像被破坏，其占位符可见，因此令人讨厌，因为它扭曲了原始图像边框

我试过的 我尝试了

content

技巧来完全删除占位符，但如果实际图像没有损坏并且应该显示，也会删除它

display: inline-block;
content: "";

---

有人能解决这个问题吗？

恐怕没有CSS唯一的解决方案。 CSS无法确定加载的图像和卸载的图像

但是浏览器确实可以

例如，Firefox就有一些你可以做到的东西。 但现在这太复杂了

我修改了你的小提琴并插入了

alt=""

到你的图像

在Firefox中，损坏的图像消失了，因为浏览器现在呈现alt文本

---

再见：maak。

@maak已经回答了下面相同的答案

对于FF

-moz强制断开图像图标：

是一个扩展的CSS属性

例子

img {
  -moz-force-broken-image-icon: 1;
  height:100px;
  width:100px;
}

<img src='/broken/image/link.png' alt='Broken image link'>

通过背景图像提供图像：url（srctimg）；比src='srctoimg'

<img style='background-image: url(srctoimg);'>
img{ 
display: block;
background: white;
content: "";
background-size: 100%;
text-indent: -999px
}


img{
显示：块；
背景：白色；
内容：“；
背景大小：100%；
文本缩进：-999px
}

也许只是把它藏起来

img{
  ::-webkit-input-placeholder { color:transparent; }
  ::-moz-placeholder { color:transparent; } /* firefox 19+ */
  :-ms-input-placeholder { color:transparent; } /* ie */
  input:-moz-placeholder { color:transparent; }
}

关于错误处理，实际上不是一个选项。不是因为它是javascript，而是因为它执行到进程的后期。加载页面时，浏览器会显示图像占位符，然后加载图像。加载失败后，将执行onerror处理程序。更好的方法是将我的技巧和加载处理程序相结合，使用适当的设置删除CSS类，以便显示图像。。。
img{
  ::-webkit-input-placeholder { color:transparent; }
  ::-moz-placeholder { color:transparent; } /* firefox 19+ */
  :-ms-input-placeholder { color:transparent; } /* ie */
  input:-moz-placeholder { color:transparent; }
}