Html 如何使用css检查是否加载了图像或是否显示了替代图像？

仅当未加载图像且显示默认值时，我才希望应用以下样式

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

但是如果我在找到并加载图像时应用它，它会扭曲图像。 这是图片

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

您可以像下面的代码一样将其包装成一个“div”。这会将紫色置于背景中，如果图片未加载，则会显示。如果图片加载，则会覆盖此“div”：

CSS示例（使用您自己的类和其他类）：

HTML示例：

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

D

实际上，我的问题在于影响img显示的填充顶部。如果我将填充顶部添加到div.avatar中，它将向下移动img。将“边距顶部：10px；”添加到div中而不是“填充顶部”是否有帮助？边距没有帮助。我试图做的是在显示时将alt D居中。只是为了澄清，当图像未显示时，您试图将“D”垂直和水平居中于紫色背景中？

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