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

Question

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

我想要一个只使用CSS的解决方案，避免使用Javascript代码。

我当前的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;
}

这里有一个jsFiddle，第一个图像被破坏，它的占位符是可见的，因此很烦人，因为它扭曲了原始图像的边界。

我尝试了什么

我已经尝试过content技巧来完全删除占位符，但如果实际图像没有损坏并且应该显示，也会删除它。

display: inline-block;
content: "";

有人能解决这个问题吗

Answer 1

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

用于FF

-moz-force-broken-image-icon: <integer>;

是一个扩展的CSS属性。

示例

img {
  -moz-force-broken-image-icon: 1;
  height:100px;
  width:100px;
}
<img src='/broken/image/link.png' alt='Broken image link'>

阅读此处

对于其他浏览器，我不确定这样的属性，但jquery，尽管你想避免它

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

Answer 2

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

但是浏览器确实可以。

举个例子，Firefox有一些你可以尝试的东西。但现在这太详细了…

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

alt=""

添加到您的图像中。

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

再见：马。

Answer 3

通过后台图片提供图片：url（srctoimg）；比src="rctoimg"

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

Fiddle演示

Answer 4

也许只是隐藏它？

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