Что раздражает больше, чем незагрузившаяся картинка?
Правильно, дефолтное оформление этих самых картинок!
В Firefox просто будет alt-текст, Chrome ещё добавит какую-то убогую иконку из девяностых... ну такое.
Что же делать?
А решение простое: когда картинка не загрузилась, её контейнер подчиняется основным блочным правилам, а значит, на него можно набросить псевдоэлементы!
Чтобы было понятно, что конкретно не загрузилось — стоит ещё и
attr(alt) докинуть.
img::after {
content: "Image of " attr(alt) "\A is not found 😞";
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
background: #eee;
border: 2px dashed;
white-space: pre-wrap;
color: #AA0000;
}
К слову, обратите внимание на пример: https://codepen.io/alinaki/pen/qEdEZOK
Там ещё и старый трюк с переводом строк без использования
br использован: \A + pre-wrap.Кстати, почему не
::before, а ::after? Да потому что Firefox занимает ::before под отображение alt и некоторые средства доступности могут этим пользоваться.Оформляйте картинки правильно, котаны!
#css #img