イメージが使用できないと表示されたときに、そのボーダーを削除するにはどうすればよいですか？

Question

イメージがまだ読み込まれていないのに、高さと幅が設定されているときに境界線を削除する方法はありますか？ 画像が読み込まれるまで、アイコンが背景画像の内側に配置されるように遅延読み込みを作成しています。

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

スニペットで同じコードも

body { 
 
    padding: 50px; 
 
} 
 

 
img { 
 
    height: 200px; 
 
    width: 200px; 
 
    
 
    /* border: 0 !important; */ 
 
    background-image: url(https://i0.wp.com/cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif); 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%; 
 
}

<img src="http://www.site/nonexistant.jpg" />

Answer 1

あなたは "壊れた画像を" スタイルすることはできません。しかし、あなたはそれを回避することができます。たとえば、あなたは、いくつかの小さなJavaScriptを使用して壊れたイメージを置き換えることができます。もちろん

<img src="idonotexist.jpg" onerror="this.src='trans.png';"> 

があなたの代わりにimgタグ内クリーナーjsの中にそれを書くことができます。

あるいは、など壊れた画像を非表示にする擬似クラスを操作することができ、ここで見てください：https://bitsofco.de/styling-broken-images/