Скрытие иконки битого изображения с помощью HTML/CSS

Часто при создании веб-страницы может возникнуть ситуация, когда какое-то изображение не загружается. Это может произойти по разным причинам — ссылка на изображение может быть некорректной, само изображение может быть удалено или перемещено. В таких случаях браузеры обычно отображают иконку битого изображения.

<img src="несуществующий_файл.jpg" alt="изображение">

Если на веб-странице используется большое количество изображений и некоторые из них не загружаются, это может сильно испортить общий вид страницы. Как же можно скрыть иконку битого изображения, используя только HTML и CSS?

Один из способов — это использовать псевдокласс :before или :after и свойство content. В этом случае, если изображение не загрузится, вместо него будет отображаться текст из свойства content.

img:before {
    content: " ";
    display: block;
}

В данном примере, если изображение не загрузится, вместо него будет отображаться пустое пространство.

Если хотите, чтобы вместо битого изображения отображался какой-то текст, просто замените пробел в свойстве content на нужный текст.

img:before {
    content: "Изображение не загружено";
    display: block;
}

Важно отметить, что этот метод работает во всех современных браузерах.