html - 如果图像已加载或是否正在显示，如何使用 css 检查？

Question

我只想在未加载图像且显示默认图像时应用以下样式。

#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">

Answer 1

您可以像下面的代码一样将它包装在一个“div”中。这会将紫色置于背景中，如果图片未加载，它将显示。如果图片加载然后它会掩盖这个“div”:

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>