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

Question

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

我正在寻求一种避免 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;
}

这是一个 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'>

Read Here

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

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

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