Die Standard-Formatierung eines defekten Bildes sieht ja nicht ganz so schön aus. Hier findest du die CSS-Formatierung um selbst Hand an der Fehlerhaften Darstellung anzulegen.
Die CSS-Styles wurden in zwei Bereiche unterteilt: Notwendige und Editierbare Formatierungen
Notwendige Formatierungen
img {
    min-height: 50px;
    position: relative;
}
img:before {
    content: " ";
    display: block;
    position: absolute;
    top: -10px; 
    left: 0;
    height: calc(100% + 10px);
    width: 100%;
}
img:after {
    position: absolute;
    top: 5px;
    left: 0px;
    width: 100%;
}
Editierbare Formatierungen
img:before {
    background-color: rgb(230,230,230);
    border: 2px dotted rgb(200,200,200);
    border-radius: 3px;
}
img:after {
    display: block;
    content: "\f127" " Broken Image of " attr(alt);
    display: block;
    font-size: 16px;
    font-style: normal;
    font-family: FontAwesome;
    color: rgb(100,100,100);
    text-align: center;
}
Das Endergebnis
broken image
Diese Klassen setzen integriertes FontAwesome voraus. Der „content“-Style in den editierbaren Formatierungen in Zeile 9 („\f127“) kann aber auch durch ein Bild, oder kein Icon ersetzt werden.
Zudem sollte darauf geachtet werden, dass der alt-Tag im Image gesetzt wurde. In der Zeile 9 unter „content“ wird das Attribut mit im Text verwendet.