画像がロードされたか、代替画像が表示されているかどうかをcssで確認する方法は？

Question

イメージがロードされず、デフォルトが表示されている場合にのみ、次のスタイルを適用したいと考えています。

#chat-log section .msg img.avatar{ 
    background: purple; 
    color: white; 
    text-align: center; 
    padding-top: 10px; 
} 

しかし、画像が見つかって読み込まれたときに適用すると、画像が歪んで表示されます。ここ は、あなたが次のコードのように「DIV」でそれをラップすることができ、画像

<img src="http://imageipsum.com/1200x675" alt="D" class="avatar"> 

Answer 1

です。これは、紫色を背景に置き、画像がロードされない場合は、それが表示されます。 （自分のクラスやものではありませんを使用）

CSSの例：

.avatar { 
     background: purple; 
     color: white; 
     text-align: center; 
     width: 1200px; 
     height: 675px; 
    } 
    .alt { 
     padding-top: 26%; 
     text-align: center; 
    } 

HTMLの例：

<div class="avatar"> 
    <img src="http://imageipsum.com/1200x675"> 
    <div class="alt">D</div> 
</div>